1

Estaba programando, cuando me doy cuenta que el hover de Buscar no funciona.

Aún teniendo el .dropbtn:hover definido, no hace efecto, pero antes si iba.

.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
  float: left;
	text-align: center;
  margin: 5px;
}   

/* DROPDOWN MENÚ */

.dropdown {
  float: right;
  overflow: hidden;
  color: black;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
   overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a:hover {
  background-color: #d7b6fa;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover {
    background-color: black;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

#myDropdown a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

#myInput {
  box-sizing: border-box;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {
  outline: 3px solid #ddd;
  }

.show {
  display: block;
  }
<div class="navbar">
<div class="dropdown">
      
    <button onclick="myFunction()" class="dropbtn">Buscar 
        
    </button>
    
    <div id="myDropdown" class="dropdown-content">
    
      <input type="text" placeholder="Buscar..." id="myInput" onkeyup="filterFunction()">
            
            <a href="#base">Hola</a>
                     
    </div>
    
  </div> 
  
</div>

Me aseguré de que estuviese bien escrito, también está bien colocado... ¿Qué puede estar pasando?

5
  • 5
    Hola Lucía, eso es porque en la regla .dropdown .dropbtn {} está definida la propiedad background-color: inherit. Por lo tanto, ésta sobrescribe a background-color de la regla .dropbtn {} con mucha mayor prioridad, resultando la pseudoclase :hover anulada. Considera eliminar background-color: inherit de la regla .dropdown .dropbtn {}. Commented el 6 feb. 2020 a las 15:42
  • 1
    Lo he eliminado, vale que ahora el hover funciona, pero aparece con color verde como si estuviese activo, en vez de el color de la barra como tal
    – Lucía
    Commented el 6 feb. 2020 a las 15:45
  • 3
    Entonces, solo te queda eliminar a background-color: #4CAF50; de la regla .dropbtn {}. Commented el 6 feb. 2020 a las 15:54
  • 1
    Lo sustituí por el color definido en la barra, en vez de eliminarlo, y ya funciona bien ^^ ¡Gracias!
    – Lucía
    Commented el 6 feb. 2020 a las 15:56
  • 1
    Si lo arreglaste sería conveniente que la persona que te recomendó el cambio (@DavidE.LunaM.) redactara una respuesta explicando lo necesario para solucionar tu problema o que tú misma la redactes y la marques como correcta para dar por cerrada esta pregunta. Gracias. Commented el 11 feb. 2020 a las 9:37

1 respuesta 1

1

Gracias al comentario de @David E. Luna M. pude solucionar mi problema.

Lo que hice fue quitar background-color: inherit de la regla .dropdown .dropbtn, haciendo así que no sobreescribiese al :hover. Pero se quedaba el color del :hover fijo constantemente.

Eso se arregló modificando el background-color: #4CAF50 de la regla .dropbtn por el color definido de la barra background-color: #555

/* MENÚ */

.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
  float: left;
	text-align: center;
  margin: 5px;
}

.navbar a {
  float: left;
  padding: 14px 16px;
  color: white;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #000;
}

.active {
  background-color: #4CAF50;
}

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
  }
}

/* DROPDOWN MENÚ */

.dropdown {
  float: right;
  overflow: hidden;
  color: black;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
   overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a:hover {
  background-color: #d7b6fa;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropbtn {
  background-color: #555;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover {
    background-color: black;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  padding: 14px 16px;
  
  font-family: inherit;
  margin: 0;
}

#myDropdown a {
  float: none;
  color: black;
  padding: 10px 10px;
  text-decoration: none;
  display: block;
  text-align: left;
}

#myInput {
  box-sizing: border-box;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {
  outline: 3px solid #ddd;
  }

.show {
  display: block;
  }
<div class="navbar">
<div class="dropdown">
      
    <button onclick="myFunction()" class="dropbtn">Buscar 
        
    </button>
    
    <div id="myDropdown" class="dropdown-content">
    
      <input type="text" placeholder="Buscar..." id="myInput" onkeyup="filterFunction()">
            
            <a href="#base">Hola</a>
                     
    </div>
    
  </div> 
  
</div>

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.