Elements after the Hover Selector

Question

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{
}

Answer 1

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>

Answer 2

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.