Question

我环顾四周，无法找到答案，也许我只是让我的代码太复杂。

我有一个div正在组成我的菜单链接。包装器div将是一个链接，其中包含我的CCS Circle的div和我的链接文本的范围：

<div class="menu-item">
    <a href="#">
        <div class="menu-circle"></div>
            <span class="menu-text">Home</span>
        </a>
</div>

我试图让它成为当我在任何地方悬停在包装器div上时它会改变形状和链接的颜色。到目前为止，我只能管理形状或链接上的个别悬停。

我的CSS是：

.menu-circle {
    width: 60px;
    height: 60px;
    background: black;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin:auto;
}

.menu-text{
    font-family: 'Oswald', sans-serif;
    font-weight:700;
    letter-spacing: .07em;
}

.menu-circle:hover{
    background:#e7e7e7;
}

.menu-text:hover{
    color:#e7e7e7;
}

.menu-item{
    text-align:center;
}

您可以看到示例here

Answer 1

如果要在包装器div上悬停ANYWHERE时更改颜色，则必须在包装器潜水上调用悬停状态。像这样：

mean-item:hover .menu-circle {change colors here}

然而，这只会在包装器div中的任何地方悬停时更改圆圈（包装器为菜单项）因此，您需要第二个悬停状态才能显示菜单文本

mean-item:hover .menu-text {change colors here}

请参阅此处以获取工作示例：

http://jsfiddle.net/s6jkja5r/

Answer 2

将此代码添加到您的风格

menu-circle:hover ~ .menu-text{
    color:#e7e7e7;
}

<强> DEMO

Answer 3

在你的css中试试这个：

.menu-item:hover div, .menu-item:hover span {
    background:#e7e7e7;
    color:#e7e7e7;
}

Answer 4

这是一个小小的CSS改变。

.menu-item:hover .menu-circle {
    background-color: #f4f;
}

.menu-item:hover .menu-text {
    color: #f4f;
}

这个小提琴应该完全符合你的目标： http://jsfiddle.net/9qg3vjm3/10/

Answer 5

检查此fiddle

这种改变的css只会在圆圈div上移动时改变圆圈div和文本颜色的背景颜色。

<强> CSS

.menu-item:hover .menu-circle{
    background:#e7e7e7;
}

.menu-item:hover .menu-text{
    color:#e7e7e7;
}

<强> HTML

<div class="menu-item">
    <a href="#">
       <div class="menu-circle"></div>
       <span class="menu-text">Home</span>
    </a>
</div>

CSS形状和文字悬停改变颜色

5 个答案:

检查此fiddle