Select previous siblings on hover [duplicate]

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.

Answer 2

Try this css:

div:hover img{
    opacity:0.5            
}
div:hover img:hover{
     opacity:1           
}  

​Test: http://jsfiddle.net/WpCtL/2/

Answer 3

try something like:

div:hover .img {
  opacity: 0.4;
}

div .img:hover {
  opacity: 1;
}

.img {
  display: inline-block;
  background: green;
  width: 100px;
  height: 40px;
}

demo: http://jsbin.com/idowoz/2/

Answer 4

You can do a trick to make it seem like this is what is happening: http://jsfiddle.net/cwxCX/3/

<div>    
    <img src="http://placekitten.com/200/200">
    <img src="http://placekitten.com/300/300">
    <img src="http://placekitten.com/400/400">
    <img src="http://placekitten.com/500/500">
</div>

CSS

div{
    float:left;
}
img{
    width:100px;
    height:100px;
}
div img{
    float:right;
}

div img:hover ~ img{
    opacity:.4;
}