CSS 两个div相互影响子级

Question

我的网站上有一个 .logo div，其中包含 .icon 和 .text。它还包含 .links，位于 .text 下，但不是实际 Logo 图像的一部分。 .icon 和 .text 都有 child .image 和 .image-hover 我用来制作背景-图像淡入淡出效果(用于 Logo )。

HTML:

<div class="logo">
    <div class="icon"><span class="image"></span><span class="image-hover"></span></div>
    <div class="text"><span class="image"></span><span class="image-hover"></span></div>
    <div class="links">Links</div>
</div>

CSS:

.icon:hover .image {
    opacity: 0;
}
// opposite for .image-hover

.text:hover .image {
    opacity: 0;
}
// opposite for .image-hover

问题是图标和文字是独立的，看起来很丑。我不希望 .links 受到影响(因此不能使用 .logo:hover)。是否有可能使 .icon:hover 影响 .text .image，反之亦然？

http://jsfiddle.net/7kj7G/

编辑我已经尝试过 JSW189 的建议。 .links 位于 .text 下，.icon 与两者的高度相同。如果我尝试将它们包装起来，则该框只有 .text 的大小，并且不包含完整的 .icon。

编辑看来 JSW189 的建议的问题只是 .icon 的 z-index 使盒子变小了。

Answer 1

您可以将 .icon 和 .text 包装在另一个 div 中，并为该 div 使用 :hover 伪类。这样，当用户将鼠标悬停在 .icon 或 .text 上时，所有 :hover 样式都会出现。

HTML:

<div class="logo">
    <div class="wrap-icon-and-text">
        <div class="icon"><span class="image"></span><span class="image-hover"></span></div>
        <div class="text"><span class="image"></span><span class="image-hover"></span></div>
    </div>
    <div class="links">Links</div>
</div>

CSS:

.wrap-icon-and-text:hover {
    /* styles here */
}