Elements after Hover Selector

Question

Elements after Hover Selector

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

Sometimes I see some css codes where the hover selector is used as follows. Do you know how the hover is being applied that way?

elemento li elemento img{
}

elemento li elemento:hover img{
}

css

asked by anonymous 16.10.2017 / 14:47

2 answers

Inquiry Laravel Eloquent Problem with javascript code

score 2 · Answer 1

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

Basically : hover applies style (s) to element (s) defined by you when the mouse is over element (s), in the example you posted when you hovered over the parent element of the image a style will be applied to the 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><imgsrc="https://image.freepik.com/vetores-gratis/lobo-que-urra-o-fundo_1355-15.jpg" />
    </div>
  </li>

</ul>

score 0 · Answer 2

When the mouse passes over the "element" the style will be applied in the "img", ie let's assume that the element is a div, when passing the mouse in the div the image that is inside the div will receive that style .