1

我的网站上有一个.logodiv，其中包含.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 使盒子更小。

4

2 回答 2

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 */
}
于 2013-02-17T17:05:46.840 回答
0 
<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 .imageAND.text .image

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

.logo:hover .text .image
{
    opacity: 0;
}
于 2013-02-17T17:18:30.260 回答