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 {}. 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
    el 6 feb. 2020 a las 15:45
  • 3
    Entonces, solo te queda eliminar a background-color: #4CAF50; de la regla .dropbtn {}. 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
    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. 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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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