2

Estoy haciendo una página web. He introducido un dropdown-button, pero me da problemas. En el menú, si pones el ratón sobre un botón, se vuelve azul claro, pero en el botón Multimedia (dropdown-button), no funciona el hover.

¿Cómo puedo solucionarlo?

Aquí el problema en vivo: https://gyazo.com/fbb3e3f7084e8d3a24ec8c9d2f714c2c

Aquí el CSS y el HTML:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 15.6%;
    background-color: #e0e0e0;
    position: fixed;
    height: 600px;
    overflow: auto;
	right:1129px;
	top:47px;
	border:1px solid #939496;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
	font-size:30px;
	
}





li a.active {
    background-color: #309ba5;
    color: white;
}

li a:hover:not(.active) {
    background-color: #4dd6e2;
    color: white;
}
.dropbtn {
    background: #e0e0e0 url('https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png') no-repeat 0;
    background-size: 25px 25px;
    color: black;
    padding: 16px 25px;
    font-size: 30px;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: Times New Roman;
	position:fixed;
	left: 9px;
	top:148px;
	width: 210px;
	height: 55px;
}

.active {    
  background-color: #309ba5;
  color: white;
}

.dropdown {
  width: 190px;
}

.dropdown-content {
    display: none;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);	
	position: fixed;
	top: 170px;
	left: 220px;
	background-color: #ededed;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size:27px;
}

.dropdown a:hover {background-color: #e2e2e2}

.show {display:block;}
<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li class="aboutme"><a href="aboutme.html">About</a></li>
</ul>



<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Multimedia</button>
  
  <div id="myDropdown" class="dropdown-content">
    <a href="mp4.html">MP4</a>
    <a href="png.html">PNG</a>
    <a href="gif.html">GIF</a>
  </div>
  
</div>


<script>
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

0

2 respuestas 2

3

El hoverlo tienes definido sólo para los elementos li y a, pero el botón que te falla es un button. Añade al estilo del botón el hover que quieras.

3
  • Con tu respuesta me he enterado más de lo que realmente era la pregunta que con la propia pregunta. Ya estaba pensando que se me veían bien todos los hover xD Commented el 10 nov. 2016 a las 10:54
  • Bueno, en el vídeo que ha adjuntado sí que se ve el problema :)
    – Awes0meM4n
    Commented el 10 nov. 2016 a las 10:59
  • Yo lo había tomado como si fuera su página y no encontraba el dropdown por ninguna parte. Con razón, siendo un vídeo... Que daño hace el trascurso de la semana. Commented el 10 nov. 2016 a las 11:02
1

Tú solamente estas definiendo clases para los elementos que estén dentro de li y a. Sin embargo, también estás haciendo uso de un elemento button, por eso no 'funciona', y no es que no funcione, simplemente como tú no lo estas definiendo no se nota el 'efecto del hover'.

En este caso, lo ideal sería hacer un DRY [Don't Repeat Yourself], ya que son clases que repetiran las mismas propiedades y valores.

Lo que se me ocurre es que al elemento ul le añadamos un ID llamado #menu y después añadiremos la siguiente clase:

#menu a:hover:not(.active),
#menu button:hover:not(.active){
  background-color:#4dd6e2;
  color:white;
}

Con esta clase tendría que funcionar, si no hubieramos aplicado el DRY, tendriamos que poner las siguientes clases

li a:hover:not(.active) {
    background-color: #4dd6e2;
    color: white;
}

.dropdown button:hover:not(.active){
  background-color:#4dd6e2;
  color:white;
}

#myDropdown a:hover:not(.active){
  background-color:#4dd6e2;
  color:white;
}

Como vemos, la diferencia es abismal y se nota, que estamos repitiendo las mismas propiedades y valores.

Saludos!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.