Select previous siblings on hover

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

"that seems to only select the elements that come after your initial selector" That is correct; you're going to have to find another way around it. — BoltClock, Dec 21 '12 at 17:34
@BoltClock To jQuery I go. Can you post your response as an answer so I can accept it? — Jon, Dec 21 '12 at 17:37

BoltClock · Accepted Answer · 2012-12-21T20:48:26.933

4

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.

edited Dec 21 '12 at 20:48

answered Dec 21 '12 at 17:39

BoltClock

700,868
160
1,392
1,356

While you're editing this question -- fix the typo in the heading :-) – podperson Dec 21 '12 at 17:41

score 2 · Answer 2 · answered Dec 21 '12 at 17:39

2

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/

answered Dec 21 '12 at 17:39

Yoshi

54,081
14
89
103

Assuming you're happy jiggling your html as well as CSS the obvious thing to do would be to reorder the img tags, since img:hover+img is a totally valid CSS selector. – podperson Dec 21 '12 at 17:43
Unfortunately, I cannot re-order my HTML. – Jon Dec 21 '12 at 17:48
@icu222much I don't see why you should, it would work with your html too. I just used span and classes because I did not have valid image sources to test with. Just apply the css to you markup and it will work. – Yoshi Dec 21 '12 at 17:50
@podperson I don't get what you're trying to say. – Yoshi Dec 21 '12 at 17:54
@yoshi, Sorry, my first comment was directed at podperson. – Jon Dec 21 '12 at 17:55
@Yoshi I like your solution, however, it didn't work for me. My example is a much simpler version of what I am working on. My current set-up involves overlaying a magnifying glass icon on top of the image which must stay at an opacity of 1.0. I appreciate the effort though :) – Jon Dec 21 '12 at 17:57

score 0 · Answer 3 · answered Dec 21 '12 at 17:42

0

Try this css:

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

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

answered Dec 21 '12 at 17:42

karacas

2,054
1
19
29

Shmiddty · Answer 4 · 2012-12-21T18:15:39.713

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

Select previous siblings on hover

4 Answers4

Linked