CSS形状和文本悬停更改颜色

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

你可以在这里看到例子

Answer 1

如果要在包装div上任何地方悬停时更改颜色，则必须在包装下潜中调用悬停状态。 像这样：

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

检查这个小提琴

更改后的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>