悬停在元素上会激活hover CSS以获取另一个元素

Question

我正在制作一个带有图标和一些文字的菜单，如下所示：

问题是，当我将鼠标悬停在标签上时，我希望图标“突出显示”，而不是将鼠标悬停在小图标上方。所以这就是现在发生的事情：

所以我的问题是如何将鼠标悬停在一个元素上（标签是div），并激活悬停CSS以获取另一个元素（图标）。

这是图标的代码： （HTML）

<a href="#" class="menubutton">
   <span id="playicon"></span> Servers
</a>

（CSS）

#playicon {
    width:12px;
    height:12px;
    background-image:url("img/svg/play2.svg");
    background-repeat:no-repeat;
    display:inline-block;
}

#playicon:hover {
    background-image:url(img/svg/play_hover.svg);
}

提前谢谢！ ：）

Answer 1

使用您提供的HTML，您需要将第二个规则更改为

.menubutton:hover #playicon {
    background-image:url(img/svg/play_hover.svg);
}

当#playicon是h .menubutton的后代时，此规则适用于.menubutton:hover > #playicon，这是你想要的（使用子选择器<span>可能是一个好主意，虽然它赢了没有任何实际的区别。）

此外，请注意，id标识的id有点奇怪 - 看起来你会在同一页面上拥有此跨度的倍数，而且需要独特。如果您有倍数，请将{{1}}替换为类。

Answer 2

#element1:hover #element2

Live example, with more advanced css techniques

Answer 3

在menubutton上使用:hover伪类而不是图标

#playicon {
    width:12px;
    height:12px;
    background-image:url("img/svg/play2.svg");
    background-repeat:no-repeat;
    display:inline-block;
}

.menubutton:hover #playicon {
    background-image:url(img/svg/play_hover.svg);
}