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包装所有的跨度，那就像这样很容易

div:hover > span{background: red;}

demo

Answer 2

看看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;    
}

Demo

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/

on：hover触发同一层次结构深度上的另一个元素

3 个答案: