具有 css 的 ul 中的 Spotlight 内联块元素

Question

我想突出悬停时的列表项，通过降低其他项目的不透明度，我们都知道这个技巧：

ul:hover li a:not(:hover){ 
        opacity: 0.3;
}

问题是，只要我将鼠标悬停在 ul 上，即使在它的空 space 区域，所有列表项都会得到 opacity: 0.3。这是片段：

a {  
  display: inline-block;
  text-decoration: none;
  font-size: 3rem;
  color: black;
}

ul{
  list-style: none;
}

ul:hover li a:not(:hover) { 
  opacity: 0.3;
}

<ul >
  <li>
    <a href="#">FIRST</a>
  </li>
  <li>
    <a href="#">SECOND</a>
  </li>
  <li>
    <a href="#">THIRD</a>
  </li>
  <li>
    <a href="#">FOURTH</a>
  </li>
  <li>
    <a href="#">FIFTH</a>
  </li>
</ul>

只有当我将鼠标悬停在 link 项（即带有 display: inline-block 的 a 标签）上时，有没有办法让它工作。

Answer 1

没办法select所有CSS中的非子元素，所以需要用ul:hover.

您可以尝试仅使用 li:hover，删除 ul 填充并将 a 显示更改为块状（以便它采用与 li 相同的尺寸).

试一试：

a {
  display: block;
}

ul {
  padding: 0;
}

ul:hover li:not(:hover) {
  opacity: 0.3;
}

如果你真的想避免 hover 变成白色 space，请添加：

ul {
  display: inline-flex;
  flex-direction: column;
}

Answer 2

您可以考虑像下面这样的 pointer-events 技巧，仅悬停 a 会触发不透明度变化：

a {  
  display: inline-block;
  text-decoration: none;
  font-size: 3rem;
  color: black;
  pointer-events:initial; /* Keep the hover only on a and it will also trigger the ul */
}

ul{
  list-style: none;
  pointer-events:none; /* Disable the hover on ul */
}

ul:hover li a:not(:hover) { 
  opacity: 0.3;
}

<ul >
  <li>
    <a href="#">FIRST</a>
  </li>
  <li>
    <a href="#">SECOND</a>
  </li>
  <li>
    <a href="#">THIRD</a>
  </li>
  <li>
    <a href="#">FOURTH</a>
  </li>
  <li>
    <a href="#">FIFTH</a>
  </li>
</ul>

具有 css 的 ul 中的 Spotlight 内联块元素

Spotlight inline-block element in an ul with css

css

hover