为区块内链接添加hover效果：高亮自身并弱化其余元素

感谢OLIVER多次迭代方案并讲解，完美解决了以下需求和问题：

原问题 #

需求 #

为<ul id="text">区块内的链接实现以下hover效果：

• 悬停任意链接时，区块内所有非该链接的内容（包括同一<li>内的非链接文本）透明度降至0.2
• 被悬停的链接单独高亮（例如添加蓝色背景）

示例HTML #

<ul id="text">
  <li>
    <a href="#">Whole line link</a>,
  </li>
  <li>
    <a href="#">Part line link</a>, and
  </li>
  <li>
    <a href="#">Link split over <br />
    Two lines</a>.
  </li>
  <li>
    Here's another <a href="#">Part line link,<br />
    Split </a>, again over two lines.
  </li>
</ul>

尝试中遇到的问题 #

• :has选择器在Firefox中兼容性差（开启实验标识仍异常，仅Chrome正常）
• hover效果仅局限于链接文本区域
• 无法将<ul>内所有元素（含非链接文本）统一弱化
• 同一<li>内的非链接文本无法随其余内容一起降低透明度

实现方案 #

CSS代码 #

#text {
  position: relative;
  list-style: none;
  padding: 0;
}

/* 用于覆盖弱化非目标内容的伪元素 */
#text::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #fff; /* 需与页面背景色一致 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#text a {
  position: relative;
  z-index: 1;
  transition: background-color 0.3s ease;
  text-decoration: none;
}

/* 悬停链接高亮 */
#text a:hover {
  background-color: #cce7ff; /* 蓝色背景示例 */
}

/* 父元素hover时显示弱化层 */
#text:hover::before {
  opacity: 0.8; /* 对应底层内容透明度0.2 */
}

/* 非悬停链接弱化 */
#text:hover a:not(:hover) {
  opacity: 0.2;
}

/* 无悬停链接的li内容弱化 */
#text:hover li:not(:has(a:hover)) {
  opacity: 0.2;
}

方案说明 #

1. 兼容性优化：核心逻辑不依赖:has作为触发条件，仅用其辅助选择无悬停链接的<li>，Firefox开启layout.css.has-selector.enabled后即可正常工作，若需完全兼容可通过少量JS补充（当前方案已覆盖主流场景）
2. 全内容弱化：通过伪元素覆盖+选择器过滤，确保所有非悬停目标的内容（包括非链接文本）都被统一弱化
3. 链接高亮层级：给<a>设置z-index:1，避免被伪元素遮挡，保证高亮背景正常显示
4. 过渡动画：添加transition让透明度和背景色变化更平滑

内容的提问来源于stack exchange，提问作者astrowstorer