html - 悬停在元素上会激活另一个元素的悬停 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当它是 hovered 的后代时.menubutton，这是您想要的（使用子选择器.menubutton:hover > #playicon可能是一个好主意，尽管它不会产生任何实际差异）。

另外，请注意，<span>用 an 标识一个 like thisid有点奇怪——看起来你会在同一页面上有多个这个 span，并且 id 需要是唯一的。如果您确实有多个，请将其替换为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);
}