1

As vezes vejo alguns códigos css onde o seletor hover é utilizado da seguinte maneira. Algúem sabe como o hover esta sendo aplicado desse jeito?

elemento li elemento img{
}

elemento li elemento:hover img{
}
2
  • Nesse caso, você está dizendo que ao passar o mouse no elemento, você quer que aplique o seu CSS no img 16/10/2017 às 12:48
  • :hover - CSS | MDN
    – Marconi
    16/10/2017 às 12:49

2 Respostas 2

2

No CSS o(s) elemento(s) a direita do seletor :hover são os que receberão a mudança de estilo.

Basicamente o :hover aplica estilo(s) a elemento(s) definido(s) por você quando o mouse está sobre elemento(s), no exemplo que você postou ao passar o mouse no elemento pai da imagem será aplicado um estilo na imagem.

Veja o exemplo abaixo:

ul li div img{
}

ul li div:hover img{
  width: 120px;
}

img {
  width: 60px;
}
<ul>
  <li>
    <div>
      <img src="https://image.freepik.com/vetores-gratis/fundo-lobo-uivando-na-lua_23-2147645253.jpg" />
    </div>
  </li>
  <li>
    <div>
      <img src="https://image.freepik.com/vetores-gratis/lobo-que-urra-o-fundo_1355-15.jpg" />
    </div>
  </li>

</ul>

0

Quando o mouse passar por cima do "elemento" o estilo sera aplicado no "img", ou seja vamos supor que o elemento é uma div, ao passar o mouse na div a imagem que esta dentro da div vai receber aquele estilo.

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 .