user2588317 user2588317 - 6 months ago 10
HTML Question

CSS child selector not working

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)

Jim Jim
Answer

the '>' selector queries for child descendants. try

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