Question

我有一些看起来像这样的HTML

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

我希望在悬停时在任何特定<li>上应用样式，并将不同的样式应用于上一个和下一个<li>元素（悬停的元素旁边的元素）。

如果可能，我想用纯css（没有JS）来做这个。

所以要明确的是<li>有3种不同的状态和3种不同的风格

元素悬停在上面。
元素没有悬停在上面，但是在它之前或之后的元素悬停在上面。
元素不会悬停在其之上或之后的元素不会悬停在上面。

我知道：hover psudo选择器可用于将样式应用于悬停元素 - 没问题

我知道可以选择下一个元素：hover + li - 没问题

将样式应用于上一个元素是一个问题。

我知道之前没有兄弟选择器，这仍然是这样吗？

我查看了另一个堆栈溢出帖子，其中讨论了将样式直接应用于上一个兄弟，然后使用两个adjibnt兄弟选择器将样式应用于第二和第三个元素。在这种情况下我无法做到这一点，因为悬停必须在第二个元素上。

我考虑过将[attribute]选择器与attr（）结合使用我的计划是给每个li一个数据属性和一个唯一的特定数字，即<li data="1"> 在悬停时，attr（）功能将用于读取前面的元素数据属性，然后将其传递给[attribute]选择器。

它可能看起来像这样

li:hover [data-number-type=attr(data-number-type)]

<ul>
  <li data-number-type="1">Owl</li>
  <li data-number-type="2">Owl</li>
  <li data-number-type="3">Owl</li>
  <li data-number-type="4">Owl</li>
<ui/>

这段代码不起作用。但有没有办法让这样的东西工作？

有没有其他css方式我没有考虑过？

在悬停时选择上一个和下一个元素

0 个答案: