悬停在元素上会激活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什么时候它是一个悬停的后代.menubutton,这是你想要的(使用子选择器.menubutton:hover > #playicon可能是一个好主意,虽然它不会产生任何实际的区别).

此外,请注意,有一个<span>像这样的确定id有点奇怪 - 看起来你会在同一页面上有这个跨度的倍数,并且ids需要是唯一的.如果你有倍数,请id用类替换.