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

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

1 个答案: