CSS样式：悬停到另一个元素[重复]

jgzswidk 于 2023-04-23 发布在其他

关注(0)|答案(2)|浏览(126)

此问题已在此处有答案：

Is there a CSS parent selector?（33答案）
Is there a "previous sibling" selector?（31个回答）
2天前关闭。
当鼠标悬停在<li>上时，如何选择<a>元素？

a ul:hover {
  color: red;
}

<a href="#">Link</a>
<ul>
  <li>Element 1</li>
  <li>Element 2</li>
</ul>

2条答案

对于支持：has的浏览器，您可以用途：

<style>
  a:has(+ ul li:hover) {
    background: red;
  }
</style>
<a href="#">Link</a>
<ul>
  <li>Element 1</li>
  <li>Element 2</li>
</ul>

但是，请在www.example.com上检查caniuse.com是否有足够的支持您的用例- Edge/Chrome/Safari支持它，但Firefox需要设置一个标志。

你可以这样使用:has：

a:has(+ ul:hover) {
  color: red;
}

<a href="#">Link</a>
<ul>
  <li>Element 1</li>
  <li>Element 2</li>
</ul>