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

Question

我想要做的是在图像 A 悬停时显示图像 B。

这是我正在使用的悬停属性img.a:hover img.b {opacity:1;}

问题是..这些元素不在同一个父级中。 这是一个jsfiddle。 http://jsfiddle.net/LquGC/

我知道它不在同一个父级中，但我不明白为什么 CSS 是这样设计的。有没有人知道任何解决方法？

Answer 1

很遗憾，CSS 只会影响兄弟姐妹或孩子。它无法导航到其父级的兄弟姐妹。所以没有纯粹的 CSS 修复。

以下两种方法可能对您有用。您可以保留当前的 ​​HTML 并使用 JS 使悬停工作，或更改您的 HTML 并使用 CSS 悬停状态。

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