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

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重新排序小提琴：

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提琴：

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