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

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

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

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

---

您可以看到示例

如果您想在包装器div上的任意位置悬停时更改颜色，则必须调用包装器div上的悬停状态。像这样：

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

但是，这只会在将鼠标悬停在包装器div（包装器是菜单项）中的任何位置时更改圆圈，因此需要为菜单文本设置第二个悬停状态

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

有关工作示例，请参见此处：

---

将此代码添加到您的样式中

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

在css中尝试以下内容：

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

---

这只是一个小小的改变

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

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

这把小提琴应该正是你想要达到的：

检查这个 此更改的css将仅在将鼠标悬停在circle div上时更改circle 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>

？@Jonofdead您必须选择一个正确的答案，因为我们不知道确切的问题是什么。他们希望在包装器div上的任何位置悬停时更改颜色，而不仅仅是他们自己的元素。这取决于他希望实际完成的任务。他们说他们想在包装器div上的任何地方悬停时改变颜色。所以他们可能希望悬停在更大的区域内，而不是仅仅在正在改变的元素上。哦。我同意……这就是为什么我说‘可以论证’；）@GifCo这是一个问题

包装器div将是一个包含我的CCS循环div的链接

。所以包装器是

menucircle

@Benjamin，那么您已经拥有的当前菜单循环div将是包装器div？或者你会有另一个div叫做menucircle？？？@GifCo Oops这是一个打字错误它的

菜单圈

哦，这不酷这里没有人在这里添加任何额外的div来完成结果。没关系，但是接下来请确保你清楚地回答它们。

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