css - 在 :hover trigger another element on same hierarchy depth 上

Question

在某些情况下，我无法更改 DOM 元素的层次结构。我面临的情况是我有一个按钮，基于 3 个跨度(按钮左、按钮内容、按钮右)。

<span class="button-left"></span>
<span class="button-content">My button</span>
<span class="button-right"></span>

当 .button-content:hover 被激活时，我还想激活 .button-left:hover 和 .button-right:hover。这可以纯粹通过 CSS 来完成吗？我知道这可以使用 jQuery 来完成，但在这种情况下我正在寻找仅 CSS 的解决方案。

Answer 1

如果所有元素都在你的悬停元素之后，通过像这样的纯 css 就可以做到这一点

.button-content:hover, .button-content:hover + .button-right{background: red;}

demo

但是我们不能用css选择上一个元素。

如果你可以用一个 div 包裹所有的 span，这可能很容易

div:hover > span{background: red;}

demo