Question

I have two images inside a div. When the user hovers over the second image, the first one’s opacity should go to 40%. I problem is that I cannot select img.first when img.second is being hovered over. I have tried looking into the general sibling selector, but that seems to only select the elements that come after your initial selector.

I know this can be done with jQuery, but I’m wondering if there is a pure CSS solution?

<div>
  <img class="first" src="#">
  <img class="second" src="#">
</div>

div > img.second:hover ~ img.first { opacity:0.4; filter:alpha(opacity=40); } //failed

Answer 1

I have tried looking into the general sibling selector, but that seems to only select the elements that come after your initial selector.

That is correct. As such, with a pure CSS selector this isn’t possible.

However, depending on your layout, you may be able to use multiple rules with selectors such as div:hover and img:hover and play with opacity values to get at what you want; see the other answers for examples. But if you want a more foolproof solution you’ll be better off with jQuery.