在元素上悬停会激活另一个元素的悬停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有点奇怪--看起来在同一页上会有这个跨度的倍数，并且it必须是唯一的。如果有倍数，请用类替换id。

Answer 2

#element1:hover #element2

使用更高级的css技术的实例

Answer 3

使用菜单按钮上的: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);
}