Elements after the Hover Selector

Asked

Viewed 144 times

1

Sometimes I see some css codes where the Hover selector is used as follows. Someone knows how Hover is being applied this way?

elemento li elemento img{
}

elemento li elemento:hover img{
}
css

  • In this case, you’re saying that by hovering the mouse over the element, you want to apply your CSS to img

  • :Hover - CSS | MDN

2 answers

2

In the CSS o(s) element(s) to the right of the selector :hover are the ones who will receive the style change.

Basically the :Hover applies style(s) to the element(s) defined(s) by you when the mouse is over element(s), in the example you posted by hovering the mouse on parent element of the image a style will be applied to image.

See the example below:

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

When the mouse goes over the "element" the style will be applied in the "img", that is to say, let’s assume that the element is a div, when passing the mouse in the div the image inside the div will receive that style.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.