Question

我正在尝试突出显示正在悬停的项目之前的列表项。

<ul>
    <li><a href="#">link</a></li>  <!-- this one should be highlighted when... -->
    <li><a href="#">link</a></li>  <!-- ...this one is hovered -->
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
</ul>

但是，我正在使用的选择器li + li:hover由于某种原因选择了自己。 li:hover + li立即选择<{1}} 跟随悬停的那个，但是我之前需要立即。我使用了错误的选择器吗？

这是展示问题的fiddle：

Answer 1

CSS组合器只能访问后代和后来的兄弟姐妹。他们无法访问以前的。

一旦CSS4到来，你可以这样做：

!li! + li:hover

（注意：据我所知，语法尚未最终确定）

然而，与此同时，试试这个：

ul, ul>li {transform:scaleY(-1)}

并反转列表中项目的顺序。

Demo

Answer 2

加号选择器选择后面的元素加号。因此li + li:hover正在寻找另一个li 之前之前的<{1}}

请参阅The Adjacent-Sibling Selector

这是CSS中的一个空白，它可能最好用Javascript填充。

为什么这个元素会自行选择？

2 个答案: