2

Me gustaria consultarles como puedo cambiar el color del hover en un dropdown menu en el navbar en bootstrap, adjunto una imagenes para que sea mas sencillo de comprrender.

Gracias por su ayuda y consejos introducir la descripción de la imagen aquí

.navbar {
  margin-bottom: 0;
  background-color: #f4511e;
  z-index: 9999;
  border: 0;
  font-size: 12px !important;
  line-height: 1.42857143 !important;
  letter-spacing: 4px;
  border-radius: 0;
  font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
  color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
  color: #f4511e !important;
  background-color: #fff !important;
}
.navbar-default .navbar-toggle {
  border-color: transparent;
  color: #fff !important;
}
.dropdown li a {
  color: #f4511e !important;
}
.navbar-default .navbar-nav>.open>a.dropdown-toggle{
  background-color: #f4511e !important;
}

1
  • agrega por favor el código que estas usando y lee de paso Cómo preguntar
    – user128299
    Commented el 11 may. 2019 a las 0:28

2 respuestas 2

1

Puedes hacerlo desde lo estilos css

.dropdown > .dropdown-item:hover{
  /*Modifica lo que quieras*/
  background:lightblue;
  color:white;
			}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<a class="nav-item dropdown-toggle" href="#" tabindex="-1"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
		<div class="dropdown-menu dropdown" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>

4
  • gracias por contestarme, consulta.. mi estructura del dropdown es un poco diferene ... es asi, entonces seria parecido al que pusiste ? <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ordenes<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="invoice_list.php">Listado de ordenes</a></li> <li><a href="create_invoice_mini2.php">Crear órden</a></li> </ul> </li>
    – Joe
    Commented el 11 may. 2019 a las 1:43
  • si, solo ponle clases a los "<li>" o si no te molesta afectar a todos los dropdown en general puedes quitar en los estilos la clase ".dropdown-item" y escribir "li" en su lugar. pero esto afectaria a todos los li que esten envueltos por lo clase "dropdown" Commented el 11 may. 2019 a las 1:58
  • Oye @PacMan Programador, ya lo logra gracais a tu ayuda... lo pude hacer asi /* Este hace el color del hover */ .dropdown-menu>li>a:hover { /*background-color:red !important;*/ background-color: white !important; color: #337ab7 !important; } /* ESte cambia el fonde del submenu*/ .dropdown-menu > li > a { /*background:yellow !important;*/ background: #337ab7 !important; color: black !important; }
    – Joe
    Commented el 12 may. 2019 a las 22:11
  • Me alegro que te haya servido Commented el 13 may. 2019 a las 1:57
0

Los elementos del menú se identifican de este modo

<a class="dropdown-item" href="#">Action</a>

Entonces vamos a tomar para modificar el color de fondo, la clase dropdown-item creando los estilos para ello de este modo

.dropdown-item:hover{
  background-color: red;
}

El único detalle es que si miras, aplicamos el color de fondo cuando la pseudoclase :hover se encuentra presente, es decir cuando el cursor esta encima del elemento.

Con eso estarías logrando modificar el color de fondo

EJEMPLO

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      <style>
        .dropdown-item:hover{
          background-color: red;
        }
      </style>
    </head>
    <body>
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>
    </html>

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.