css - on :hover 触发相同层次结构深度的另一个元素

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 {
    background-color: yellow;
}
.button-right {
    background-color: grey;
}
.button-content:hover {
    background-color: blue;    
}

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

演示

Answer 2

如果所有元素都在您的悬停元素之后，则可以通过这样的纯 css 完成此操作

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

演示

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

如果你可以用一个 div 包裹你的所有跨度，就可以像这样简单

div:hover > span{background: red;}

演示

Answer 3

您可以针对父链接悬停动作并基于此执行某些操作吗？

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

a.button:hover .button-left    { background-color: red; }
a.button:hover .button-content { background-color: red; }
a.button:hover .button-right   { background-color: red; }

演示：http: //jsfiddle.net/Xp5e8/