Mientras paso el mouse sobre un área de etiqueta <a>, quiero cambiar el color del icono, pero por alguna razón sigue siendo el mismo. Pude obtener el resultado deseado solo si señalaba el ícono directamente .sidebar .menu li a .icon:hover{background: #ecedf2;color: #3d5654;} pero tengo que pasar el mouse exactamente sobre el ícono. Lo que quería lograr es cambiar el color del ícono mientras se desplaza sobre el área de la etiqueta. Avísame si estoy haciendo algo mal.

HTML

<div class="sidebar">
  <ul class="menu">
    <li>
      <a href="#"
        ><span class="icon"><i class="fas fa-desktop"></i></span
        ><span class="text">Dashboard</span></a
      >
    </li>
  </ul>
</div>

CSS

* {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Jost', sans-serif;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  height: 100vh;
  width: 100wh;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  display: grid;
  grid-template-columns: auto 8fr;
  grid-template-rows: 80px auto 50px;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
}

.sidebar {
  grid-area: sidebar;
  width: 260px;
  background: #2c343b;
  height: 100%;
}

.sidebar .menu {
  padding-right: 30px;
  padding-left: 20px;
  margin: 0;
  overflow: auto;
  transition: all 0.5s;
}

.sidebar .menu li a {
  color: #ecedf2;
  display: block;
  width: 100%;
  line-height: 60px;
  text-decoration: none;
  padding: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1px;
  transition: 0.5s;
}


.sidebar .menu li a .icon {
  color: #ecedf2;
  width: 25px;
  display: inline-block;
}

.sidebar .menu li a:hover,
.sidebar .menu li a.active {
  background: #ecedf2;
  color: #3d5654;
}
0
John John 30 may. 2020 a las 08:02

5 respuestas

La mejor respuesta

Puedes lograrlo usando este código

.sidebar .menu a:hover i{
        background: #ecedf2;
        color: #3d5654;
}
2
M.Awais 30 may. 2020 a las 05:14

Quizás te ayude. Solo agrego un selector CSS para el icono.

.sidebar .menu li a:hover i{
   color:red;
}
1
Nilesh Chavan 30 may. 2020 a las 05:11
  • Prueba esto.
* {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Jost', sans-serif;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  height: 100vh;
  width: 100wh;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  display: grid;
  grid-template-columns: auto 8fr;
  grid-template-rows: 80px auto 50px;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
}

.sidebar {
  grid-area: sidebar;
  width: 260px;
  background: #2c343b;
  height: 100%;
}

.sidebar .menu {
  padding-right: 30px;
  padding-left: 20px;
  margin: 0;
  overflow: auto;
  transition: all 0.5s;
}

.sidebar .menu li a {
  color: #ecedf2;
  display: block;
  width: 100%;
  line-height: 60px;
  text-decoration: none;
  padding: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1px;
  transition: 0.5s;
}


.sidebar .menu li a .icon {
  color: #ecedf2;
  width: 25px;
  display: inline-block;
}

.sidebar .menu li a:hover,
.sidebar .menu li a.active {
  background: #ecedf2;
  color: #3d5654;
}
<div class="sidebar">
  <ul class="menu">
    <li>
      <a href="#"
        ><span class="icon"><i class="fas fa-desktop"></i></span
        ><span class="text">Dashboard</span></a
      >
    </li>
  </ul>
</div>
0
Ashish Sondagar 30 may. 2020 a las 05:07

Puede lograr esto con la sintaxis: hover (es una pseudo clase)

a:hover { color : value }

// a es el elemento al que desea que se aplique el elemento emergente // // verifique la documentación de mdn, pseudo clase //

0
SaMB0 30 may. 2020 a las 05:14

Intente esto en su lugar:

.sidebar .menu li a .icon i:hover {
     color:red;
}
-1
Alae Essaki 30 may. 2020 a las 05:15