如何将悬停属性与不在父级中的其他元素一起使用

Question

What I'm trying to do is get image B to appear when image A is hovered over.

Here's the hover properties I'm using img.a:hover img.b {opacity:1;}

The problem is.. these elements aren't in the same parent. Here's a jsfiddle. http://jsfiddle.net/LquGC/

I understand that it's not in the same parent but I don't understand why CSS was designed this way. Does anybody know any workarounds for this?

Answer 1

Unfortunately CSS will only effect siblings or children. It can't navigate to its parent's sibling. So there is no pure CSS fix for this.

Here are two ways that may work for you. You can keep your current HTML and use JS to make the hover work, or change your HTML and use CSS hover states.

HTML reorder fiddle:

HTML:

 <div class="wrapper">
    <div class="group1">
         <img class="a" src="http://imgur.com/Y7Cz2Q3.jpg">
         <img class="b" src="http://imgur.com/MMZwSdO.jpg">             
    </div>
    <div class="group2">
         <img class="c" src="http://imgur.com/HHbpx0w.jpg">
         <img class="d" src="http://imgur.com/Q9LfCwH.jpg">     
    </div>
</div>

CSS:

.b, .d {
    opacity:0;
    transition: .3s;
    }
img {display: block;}   
.wrapper > div {display: inline-block;}

.group1:hover .b {
    opacity:1;
}

.group2:hover img.d {
    opacity:1;
}

JQUERY fiddle:

JS:

$('.a').hover(
    function () {
        $('.b').css('opacity','1');
    }, function () {
        $('.b').css('opacity','0');
});
$('.c').hover(
    function () {
        $('.d').css('opacity','1');
    }, function () {
        $('.d').css('opacity','0');
});

CSS:

.b,.d {
    opacity: 0;
}