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

Question

我想做的是让图像 B 在鼠标悬停在图像 A 上时出现。

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

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

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

Answer 1

不幸的是，CSS 只会影响 sibling 或 child 。它无法导航到其父项的兄弟项。所以对此没有纯 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;
}