CSS伪元素Hover效果异常求助：空白区域hover操作被阻断

问题原因 #

你遇到的hover异常问题，核心原因是伪元素使用了relative定位：

• relative定位会保留元素在文档流中的原始空间，导致伪元素向上偏移后（top: -2.2rem），会覆盖上方列表项的区域，干扰鼠标事件的传递。
• 同时，伪元素的布局会占用列表项内部空间，导致<li>内<p>外的空白区域（即使视觉上不明显）无法正常触发hover。

修复方案 #

通过调整伪元素的定位方式，让它完全依附在<li>内部，避免干扰其他元素：

1. 给<li>添加position: relative，作为伪元素的定位容器；
2. 将伪元素的relative定位改为absolute，并设置top: 0、left: 0，使其填充整个<li>；
3. 用height: 100%代替固定高度，适配<li>的高度；
4. 调整z-index为-1（足够让伪元素在<li>内容下方，无需-99）。

修改后的完整代码 #

JavaScript（无需修改）

var li = document.querySelectorAll('li')
li.forEach((e) => {
  e.addEventListener('click', (event) => {
    li.forEach((l) => {
      l.classList.remove('active')
    })
    e.classList.add('active')
  })
})

CSS（关键修改已标注）

:root {
  --el-color-primary: #409eff;
  --el-color-info: #909399;
  --el-color-primary-rgb: 64, 158, 255;
}

.categories {
  width: 200px;
}

li {
  list-style-type: none;
  box-sizing: border-box;
  height: 2.2rem;
  cursor: pointer;
  color: var(--el-color-info);
  z-index: 0;
  border-radius: .5rem;
  position: relative; /* 新增：作为伪元素的定位容器 */
}

li {
  margin: .3rem;
}

li p {
  font-size: 1rem;
  line-height: 1rem;
  padding: .6rem 0 .6rem .8rem;
  margin: 0;
  color: var(--el-color-info);
}

li.active p {
  font-weight: 600;
  color: var(--el-color-primary);
}

li.active {
  background-color: rgba(var(--el-color-primary-rgb), .2);
}

li:not(.active)::after {
  content: "";
  display: block; /* 从inline-block改为block，更适合填充效果 */
  width: 0;
  height: 100%; /* 用100%代替固定值，适配li高度 */
  position: absolute; /* 从relative改为absolute */
  top: 0; /* 新增：定位到li顶部 */
  left: 0; /* 新增：定位到li左侧 */
  border-radius: .5rem;
  background-color: rgba(var(--el-color-primary-rgb), .1);
  z-index: -1; /* 调整为-1，足够在li内容下方 */
  transition: width .4s ease-out;
}

li:not(.active):hover p {
  color: var(--el-color-primary);
}

li:not(.active):hover::after {
  width: 100%;
}

HTML（无需修改）

<ul class="categories">
  <li class="active">
    <p>Item 1</p>
  </li>
  <li>
    <p>Item 2</p>
  </li>
  <li>
    <p>Item 3</p>
  </li>
  <li>
    <p>Item 4</p>
  </li>
  <li>
    <p>Item 5</p>
  </li>
  <li>
    <p>Item 6</p>
  </li>
</ul>

效果验证 #

修改后：

• 任意方向的hover切换（包括从Item2到Item6）都会正常触发；
• <li>内部所有区域（包括<p>外的空白）都能正确响应hover；
• 伪元素完全限制在<li>内部，不会干扰其他列表项。

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