如何在CSS中为直接子元素单独设置hover效果并复用样式？

问题描述 #

我想要创建一个标签栏（tab bar），为其直接子元素添加hover效果，编写了如下代码意图为列表内的每个元素单独应用效果，但代码未生效。当我将*:hover替换为li:hover时代码可以正常工作，但我希望使用*选择器以便在代码的其他部分复用该样式。

HTML代码 #

<!-- navigation -->
<div>
  <nav>
    <ul class="primary-navigation underline-indicators flex">
      <li class="active">
        <a class="uppercase text-white letter-spacing-2" href="#">
          <span>01</span>Active</a
        >
      </li>
      <li>
        <a class="uppercase text-white letter-spacing-2" href="#">
          <span>02</span>Hovered</a
        >
      </li>
      <li>
        <a class="uppercase text-white letter-spacing-2" href="#">
          <span>03</span>Idle</a
        >
      </li>
    </ul>
  </nav>
</div>

CSS代码 #

.underline-indicators > * {
  padding: var(--underline-gap, 1rem) 0;
  border-bottom: 0.2rem solid hsl(var(--clr-white) / 0);
}

.underline-indicators > *:hover,
.underline-indicators > *:focus {
  border-color: hsl(var(--clr-white) / 0.5);
}

.underline-indicators > .active {
  border-color: hsl(var(--clr-white) / 1);
}

解决方案 #

可以实现目标效果，问题根源在于交互事件的触发对象和元素布局范围：

为什么原代码失效？ #

• .underline-indicators > *指向的是<ul>的直接子元素<li>，但<li>内部的<a>是默认的可交互元素，hover操作实际触发在<a>上，而非<li>，导致<li>的hover样式无法激活。
• 另外，.underline-indicators > .active和.underline-indicators > *:hover的CSS优先级相同，若样式顺序不合理，active元素的hover状态可能被覆盖，但这不是核心问题。

最优实现方式（保留通配符复用性） #

推荐方案一，它明确了交互区域，同时保持样式的复用性，适配不同类型的子元素：

.underline-indicators > * {
  padding: var(--underline-gap, 1rem) 0;
  border-bottom: 0.2rem solid hsl(var(--clr-white) / 0);
  cursor: pointer; /* 标记父元素为可交互 */
}

/* 让内部可点击元素占满父元素空间，确保hover触发在父元素上 */
.underline-indicators > * > a {
  display: block;
  width: 100%;
  height: 100%;
}

.underline-indicators > *:hover,
.underline-indicators > *:focus {
  border-color: hsl(var(--clr-white) / 0.5);
}

.underline-indicators > .active {
  border-color: hsl(var(--clr-white) / 1);
}

如果不想调整布局，也可以用方案二，通过选择器覆盖子元素hover时的父元素样式：

.underline-indicators > * {
  padding: var(--underline-gap, 1rem) 0;
  border-bottom: 0.2rem solid hsl(var(--clr-white) / 0);
}

/* 同时监听父元素和子元素的hover/focus事件，触发父元素的边框样式 */
.underline-indicators > *:hover,
.underline-indicators > *:focus,
.underline-indicators > *:focus-within {
  border-color: hsl(var(--clr-white) / 0.5);
}

.underline-indicators > .active {
  border-color: hsl(var(--clr-white) / 1);
}

方案一的优势在于逻辑清晰，交互区域明确，不管.underline-indicators的直接子元素是<li>、<button>还是其他标签，都能稳定触发hover效果，完全满足样式复用需求。

内容的提问来源于stack exchange，提问作者Oussama ALAOUI ISMAILI