Question

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

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伪类。这样，当用户将鼠标悬停在:hover或.icon上时，所有.text个样式都会显示。

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 */
}

Answer 2

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

选择器会在悬停时影响.icon .image和.text .image

.logo:hover .icon .image
{
    opacity: 0;
}

.logo:hover .text .image
{
    opacity: 0;
}

CSS Two Divs影响每个孩子

2 个答案: