CSS child selector not working

Question

I have the following HTML code:

<div class="resultimage">
    <a href="www.site.com">
        <img class="resultpic" src="images/image.jpg">
        <img class="resultview" src="images/view.png">
    </a>
</div>

and the following CSS:

.resultimage:hover > .resultpic {
opacity: 0.7;
}

This doesn't seem to work. The page will have multiple instances of this exact block of code (I'm not sure if that matters). I might be going about this all wrong, but what I am trying to achieve is this: whenever you hover over the first image, the second image appears over top of it and the first image's opacity is reduced. What would be the best way to achieve this? (the second image is set to "display: none;" by default)

score 4 · Accepted Answer · edited May 30 '16 at 14:33

4

the '>' selector queries for child descendants. try

.resultimage:hover .resultpic {
    opacity: 0.7;
}

edited May 30 '16 at 14:33

stkent

19,772
14
85
111

answered Dec 21 '13 at 07:38

Jim

209
3
10

1

yup. that worked! Its funny how you spend so much time trying to get something to work and you skip over the obvious (I was originally trying to do this with jQuery) – user2588317 Dec 21 '13 at 07:43
Or you can use `.resultimage:hover > a > .resultpic` – Mr. Alien Dec 21 '13 at 07:47

score 1 · Answer 2 · answered Dec 21 '13 at 07:43

1

> is immediate child selector

but <img class="resultview" src="images/view.png"> is not an immediate child of <div class="resultimage"> but a descendant. Hence the correct syntax is

.resultimage:hover .resultpic {
    opacity: 0.7;
}

answered Dec 21 '13 at 07:43

Rajesh Paul

6,793
6
40
57

score 0 · Answer 3 · answered Dec 21 '13 at 07:48

0

Add :hover to the particular element you are selecting. it makes more sense as:

.resultimage .resultpic:hover{
    opacity:0.7;
}

see the demo on jsfiddle http://jsfiddle.net/dwX99/

answered Dec 21 '13 at 07:48

Emmanuel John

2,296
1
23
30

score 0 · Answer 4 · answered Dec 21 '13 at 07:54

0

Try this:

.resultimage:hover img.resultpic {
    opacity: 0.7;
}

answered Dec 21 '13 at 07:54

Mr.G

3,413
2
16
20

CSS child selector not working

4 Answers4