3

Tenho o seguinte HTML:

.menu {
  width: 100%;
  height: 75px;
  background: #474747;
}
.menu li {
  height: 75px;
  text-transform: uppercase;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  float: left;
  cursor: pointer;
  position: relative;
  -webkit-transition: all 200ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
  -moz-transition: all 200ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
  -o-transition: all 200ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
  transition: all 200ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
  /* easeInOutExpo */
  -webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
  -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
  -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
  transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
  /* easeInOutExpo */
}
.menu span {
  font: 700 18px/18px"Open Sans";
  color: #fff;
  line-height: 75px;
}
.menu li:hover {
  background: #fff;
}
.menu li span:hover {
  color: #474747;
}
<div class="menu">
  <div class="grid_960 margin-auto">
    <ul>
      <li>
        <span>Home</span>
      </li>
    </ul>
  </div>
</div>

Eu quero que quando eu passe o mouse em cima da li, o span mude. Pois hoje, o span está mudando só quando passo o mouse em cima do span.

1 Resposta 1

7

Você foi pelo caminho certo, mas colocou o :hover no lugar errado.

Para mudar o estilo do span (filho) ao passar o mouse no li (pai), o css deve ficar assim:

.menu li:hover span {
  color: #474747;
}

Esse seletor indica que o estilo deverá ser aplicado ao span dentro de um li com a pseudo-classe :hover.

.menu {
  width: 100%;
  height: 75px;
  background: #474747;
}
.menu li {
  height: 75px;
  text-transform: uppercase;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  float: left;
  cursor: pointer;
  position: relative;
  -webkit-transition: all 200ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
  -moz-transition: all 200ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
  -o-transition: all 200ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
  transition: all 200ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
  /* easeInOutExpo */
  -webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
  -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
  -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
  transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
  /* easeInOutExpo */
}
.menu span {
  font: 700 18px/18px"Open Sans";
  color: #fff;
  line-height: 75px;
}
.menu li:hover {
  background: #fff;
}
.menu li:hover span {
  color: #474747;
}
<div class="menu">
  <div class="grid_960 margin-auto">
    <ul>
      <li>
        <span>Home</span>
      </li>
    </ul>
  </div>
</div>

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .