网站列表标题hover跨元素时出现闪烁故障，寻求技术解决方案

故障分析 #

你遇到的两个标题间hover时反复闪烁的问题，核心原因有三点：

1. hover绑定范围过大：原代码把hover样式绑定在.item-closed容器上，这个容器是display:flex且包含占位伪元素，实际hover触发区域远大于标题文本本身，甚至覆盖到相邻item的区域。
2. 伪元素布局异常：.item-closed:after虽设置visibility:hidden但未脱离文档流，它占据的空间会扩大容器的可hover范围，加上容器margin的语法错误（margin: 2vh 0 2vh 0 2vh多写了一个值），导致相邻item的hover区域出现重叠。
3. 重复ID问题：两个列表项的id都是item02，这会导致JS交互和锚点跳转异常，也可能间接影响布局稳定性。

解决方案 #

1. 缩小hover触发范围：将hover样式绑定到标题<h2>元素上，仅当鼠标悬停在标题文本上时才触发样式变化。
2. 修正伪元素布局：给.item-closed:after添加position:absolute，让它完全脱离文档流，不再影响容器的hover区域。
3. 修复语法错误：修正.item-closed的margin语法，确保容器间距正常。
4. 唯一化ID：给每个列表项设置唯一的id，避免DOM元素冲突。

修改后的代码 #

CSS部分 #

h2 {
  font-weight: lighter;
  cursor: pointer;
  mix-blend-mode: difference;
  font-size: inherit;
}

.item-closed {
  display: flex;
  position: relative;
  align-items: flex-end;
  padding-top: 0;
  width: 100%;
  font-size: 4rem;
  margin: 2vh 0 2vh 2vh; /* 修正margin语法错误 */
}

/* 将hover绑定到h2，而非整个容器 */
.item-closed h2:hover {
  font-family: 'Newsreader', Italic, serif;
  font-style: italic;
  font-size: 4rem !important;
  color: #651EFB;
  text-transform: lowercase;
  cursor: url(assets/images/image01.jpg) pointer;
  mix-blend-mode: normal;
}

.item-closed:after {
  position: absolute; /* 让伪元素脱离文档流 */
  align-items: flex-end;
  content: attr(data-text);
  font-style: normal;
  font-family: "authentic-sans-130", serif;
  font-size: 2rem;
  text-transform: uppercase;
  color: #651EFB;
  overflow: hidden;
  visibility: hidden;
}

.item {
  padding: 0;
}

.item-open {
  padding-top: 20vh;
}

.item-open h2 {
  font-size: 4rem;
  font-family: 'authentic-sans-130'
}

.item:first-child {
  margin-top: 35vh;
}

HTML部分 #

<div class="item item-closed" data-text="text" id="item01"> <!-- 修正唯一ID -->
  <h2 class="white-text text" onclick="toggleInfo(); removeItemClosed()">
    <a href="#item01">The current picture Nr. 567 on my phone camera</a>
  </h2>
  <div class="default-display toggle-info">
    <div class="form black">
      <div class="tag tag-left">
        <p>Found!</p>
      </div>
      <div class="tag tag-middle">
        <p>Reminded by Esteban Barco</p>
      </div>
      <div class="tag tag-right">
        <p>I was cooking for over 15 people</p>
      </div>
    </div>
    <section class="invisible-box invisible-box-wrap">
      <img src="assets/images/image01.png" alt="memory" class="image image-margin-canvas" id="image01">
    </section>
  </div>
</div>

<div class="item item-closed" data-text="text" id="item02"> <!-- 保留唯一ID -->
  <h2 class="white-text text" onclick="toggleInfo(); removeItemClosed()">
    <a href="#item02">The current picture Nr. 567 on my phone camera</a>
  </h2>
  <div class="default-display toggle-info">
    <div class="form black">
      <div class="tag tag-left">
        <p>Found!</p>
      </div>
      <div class="tag tag-middle">
        <p>Reminded by Esteban Barco</p>
      </div>
      <div class="tag tag-right">
        <p>I was cooking for over 15 people</p>
      </div>
    </div>
    <section class="invisible-box invisible-box-wrap">
      <img src="assets/images/image01.png" alt="memory" class="image image-margin-canvas" id="image02">
    </section>
  </div>
</div>

补充说明 #

修改后，只有当鼠标真正悬停在标题文本上时才会触发样式变化，相邻item的hover区域不再重叠，也就不会出现跨元素闪烁的问题。同时修正的重复ID问题也能避免后续JS交互和锚点跳转的异常。

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