导航li元素hover时链接字体显示异常 z-index设置无效如何修复

问题原因 #

你遇到的hover时导航文字变浅的问题和z-index层级无关，是opacity属性的固有特性导致：给元素设置opacity后，该元素的所有子元素都会继承同样的透明度，且无法通过子元素单独设置属性覆盖。你在.nav-item:hover规则中设置了opacity: 65%，所以li内的白色链接文字也会变成65%不透明，视觉上就呈现为浅灰色，仿佛位于背景下方。

修复方案 #

将hover状态下控制透明度的opacity属性删掉，改用带透明度的rgba格式设置背景色即可，这样只有背景会有透明效果，不会影响子元素的文字颜色。
同时建议把.nav-item的布局属性默认提前设置，避免hover时因为新增布局属性出现元素跳动的问题。

修改后完整CSS代码 #

.nav-list{
     position:absolute;
     background-color: rgba(0,0,0,0.5);
     width:100%;
     height: 14%;
     display: flex;
     justify-content: space-around;
     align-items:center;
     transition: all 1s;
  }
/* 提前给.nav-item设置默认布局属性，避免hover跳动 */
.nav-item {
    height:100%;
    width:10%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.nav-link, .sub-item{
   font-family: 'Roboto Condensed', sans-serif;
   font-size: 1.8rem;
   color: white;
   /* 可选：给a标签设置相对定位，确保文字层级最高 */
   position: relative;
  }

 .nav-item:hover {
    /* 用rgba设置带透明度的黑色背景，代替opacity */
    background-color: rgba(0,0,0,0.65);
 }

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