如何实现悬停标题中'restaurant'文本时同步改变菜单文字颜色？

要实现鼠标悬停在restaurant文本时同步修改菜单颜色，核心问题是CSS选择器无法向前选取元素（当前nav在h1之前），下面提供两种可行方案：

方案一：纯CSS实现（需调整HTML结构） #

把nav放到h1之后，利用CSS通用兄弟选择器~关联hover状态：

修改后的HTML #

<h1 class="textb">
  Not a <span id="heading1" class="headingRestaurant">restaurant</span>,
  <br> but here for them.
</h1>

<nav>
  <ul>
    <li>
      <a href="file:///C:/Users/.../index.html">Home</a>
    </li>
    <li>
      <a href="file:///C:/Users/.../about.html">About</a>
    </li>
  </ul>
</nav>

调整后的CSS #

/* 标题基础样式 */
.textb {
  pointer-events: none;
  color: #000; /* 默认文字颜色，可根据需求调整 */
}
.headingRestaurant {
  cursor: pointer;
  pointer-events: initial;
}

/* hover时的标题样式 */
.headingRestaurant:hover {
  color: red;
}
.textb:hover {
  color: white;
}

/* hover restaurant时同步修改菜单文字颜色 */
.headingRestaurant:hover ~ nav a {
  color: white;
}

方案二：JavaScript实现（无需修改HTML结构） #

通过监听restaurant元素的鼠标事件，动态给菜单添加/移除样式类：

HTML（保持原结构不变） #

<nav>
  <ul>
    <li>
      <a href="file:///C:/Users/.../index.html">Home</a>
    </li>
    <li>
      <a href="file:///C:/Users/.../about.html">About</a>
    </li>
  </ul>
</nav>

<h1 class="textb">
  Not a <span id="heading1" class="headingRestaurant">restaurant</span>,
  <br> but here for them.
</h1>

CSS新增样式类 #

/* 菜单文字变白的样式类 */
.nav-white a {
  color: white;
}

/* 保留原有标题样式 */
.headingRestaurant:hover {
  color: red;
}
.headingRestaurant {
  cursor: pointer;
}
.textb {
  pointer-events: none;
}
.headingRestaurant {
  pointer-events: initial;
}
.textb:hover {
  color: white;
}

添加JavaScript代码 #

const restaurantSpan = document.getElementById('heading1');
const navElement = document.querySelector('nav');

// 鼠标进入时添加样式类
restaurantSpan.addEventListener('mouseenter', () => {
  navElement.classList.add('nav-white');
});

// 鼠标离开时移除样式类
restaurantSpan.addEventListener('mouseleave', () => {
  navElement.classList.remove('nav-white');
});

两种方案对比：

• 纯CSS方案更简洁，但依赖HTML结构调整；
• JavaScript方案更灵活，无需改动原有DOM结构，适合无法调整HTML的场景。

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