使用CSS实现：悬停时仅高亮当前元素，其余元素变色

你的代码在逻辑和样式优先级上存在两处核心问题，导致无法实现预期效果：

• 初始状态不符合需求：.sub-menu-mast a:not(:hover)会匹配所有未被hover的a标签，页面加载后所有链接直接显示红色，和「默认黑色」的要求相反。
• hover逻辑失效：当hover某个a标签时，.sub-menu-mast>li>a和.sub-menu-mast a:not(:hover)的选择器优先级相同，后声明的样式会覆盖先声明的，但这种写法无法精准控制「仅当前hover元素保持黑色，其余变红」的效果。

正确实现代码 #

CSS 代码

.sub-menu-mast {
  line-height: 30px;
  background-color: rgb(254, 254, 254);
  width: 9rem;
  cursor: pointer;
}

/* 默认所有链接为黑色 */
.sub-menu-mast > li > a {
  color: black;
  position: relative;
  left: 10%;
  /* 可选：添加过渡动画让颜色变化更自然 */
  transition: color 0.2s ease;
}

/* 鼠标悬停在子菜单容器时，所有链接统一变红 */
.sub-menu-mast:hover > li > a {
  color: red;
}

/* 鼠标悬停在单个链接时，该链接恢复黑色 */
.sub-menu-mast > li > a:hover {
  color: black;
}

HTML 代码（保持原结构不变）

<nav>
  <ul>
    <li>
      <a>XYZ </a>
      <ul class="sub-menu-mast">
        <li><a href="">Track</a></li>
        <li><a href="">Return</a></li>
      </ul>
    </li>
  </ul>
</nav>

逻辑说明 #

1. 初始状态：通过.sub-menu-mast > li > a将所有链接设置为黑色，满足默认显示要求。
2. 当鼠标进入子菜单区域时，利用父容器的hover状态，将所有子链接统一改为红色。
3. 当鼠标精准hover到单个链接时，该链接的hover样式优先级更高，会将自身颜色重置为黑色，其余链接保持红色，完全符合你预期的交互效果。

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