html - 悬停时更改上一个元素

Question

我有这样的列表:

<ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
</ul>

有什么方法可以在悬停第二个元素时仅使用 css 和 html 来更改第一个元素样式？

Answer 1

我正在删除悬停时下一个 sibling 的样式，这样看起来只有 previous sibling 姐妹在悬停时添加了样式。

ul:hover li {
  color: blue;
}
ul:hover li:hover ~ li{
  color: red;
}

ul li {
  color: red;
}

<ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
</ul>