在某些情况下,我无法更改 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 的解决方案。
最佳答案
如果所有元素都在你的悬停元素之后,通过像这样的纯 css 就可以做到这一点
.button-content:hover, .button-content:hover + .button-right{background: red;}
但是我们不能用css选择上一个元素。
如果你可以用一个 div 包裹所有的 span,这可能很容易
div:hover > span{background: red;}
关于css - 在 :hover trigger another element on same hierarchy depth 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18248412/