如何实现鼠标悬停时每个链接显示对应背景文本？

你当前的问题出在三个核心点：

• HTML结构不符合语义规范：<ul>的直接子元素只能是<li>，你在里面嵌套了<div>，会导致样式逻辑混乱。
• CSS兄弟选择器~的特性：它会选中当前元素之后所有匹配的兄弟元素，所以第一个.info__text hover时，后面两个.info__text_hidden都会被触发显示，造成文本重叠。
• 所有.info__text_hidden的定位完全一致，默认就处于重叠状态，hover时问题更明显。

修正方案 #

1. 重构HTML结构：把每个导航项（包括链接、对应的隐藏大文本、hover背景）都包裹在单独的<li>里，让每个导航单元独立，避免兄弟选择器误触发。
2. 调整CSS逻辑：针对每个<li>内部的元素做hover交互，利用后代选择器替代兄弟选择器，确保hover只触发当前导航项对应的隐藏内容。
3. 给不同的隐藏文本设置差异化定位，避免默认重叠。

修改后的HTML

<section class="info">
  <ul class="info__container">
    <li class="info__item">
      <span class="info__text">
        <span class="info__number">01</span>
        <a class="info__link" href="#"> Works</a>
      </span>
      <div class="info__black-hover"></div>
      <div class="info__text_hidden works">
        <span class="info__text_decoration">W</span>orks
      </div>
    </li>
    <li class="info__item">
      <span class="info__text">
        <span class="info__number">02</span>
        <a class="info__link" href="#"> About</a>
      </span>
      <div class="info__black-hover"></div>
      <div class="info__text_hidden about">
        <span class="info__text_decoration">A</span>bout
      </div>
    </li>
    <li class="info__item">
      <span class="info__text">
        <span class="info__number">03</span>
        <a class="info__link" href="#"> Contact</a>
      </span>
    </li>
  </ul>
</section>

修改后的CSS

.info {
  max-width: 1920px;
  padding: 40px 0 0;
  margin: 0 auto;
}

.info__container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  list-style-type: none;
  font-size: 20px;
  color: #1c1c1c;
  background-color: #ebebeb;
  margin: 0;
  padding-left: 0;
  height: 150px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.info__item {
  position: relative;
  z-index: 1;
}

.info__text {
  width: 60px;
  display: block;
}

.info__black-hover {
  background: #1c1c1c;
  width: 100vw;
  height: 0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  transition: 0.5s opacity, 0.5s visibility, 0.6s height ease-in;
  z-index: -1;
}

.info__item:hover .info__black-hover {
  height: 150px;
  opacity: 1;
  visibility: visible;
}

.info__text_hidden {
  font-size: 210px;
  font-family: "Roobert";
  letter-spacing: -10px;
  position: absolute;
  color: #474747;
  bottom: -38px;
  z-index: -2;
  transform: translateY(70%);
  transition: all 1.3s ease;
  white-space: nowrap;
}

/* 给不同的隐藏文本设置定位，避免重叠 */
.info__text_hidden.works {
  left: calc(50% - 250px);
}

.info__text_hidden.about {
  left: calc(50% + 100px);
}

.info__item:hover .info__text_hidden {
  color: #636262;
  transform: translateY(0%);
}

.info__text_decoration {
  font-family: "RoxboughCF-Regular";
  position: absolute;
  left: -185px;
  bottom: 2px;
}

.info__number {
  font-size: 22px;
  color: #7a7a7a;
}

.info__link {
  text-decoration: none;
  color: #1c1c1c;
}

.info__item:hover .info__link {
  color: white;
}

关键改动说明 #

• 结构重构：用.info__item包裹每个导航单元，确保每个链接和对应的隐藏文本、背景是独立作用域，解决了兄弟选择器误触发的问题。
• 选择器调整：把原来的兄弟选择器~换成了后代选择器.info__item:hover .xxx，只触发当前hover项内部的元素。
• 定位修正：给.works和.about类的隐藏文本设置不同的left值，避免默认重叠；同时把背景层.info__black-hover改成基于视口宽度，确保hover时全屏覆盖背景。
• 层级调整：通过z-index明确元素层级，保证链接文本在最上层，背景层在最下层。

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