导航悬停时修改Overlay字体颜色及调整位置的实现问题

需求 #

• 鼠标悬停导航区域时，显示白色Overlay区块
• 导航文字颜色变为白色
• Overlay向下偏移

现存问题 #

• 悬停时Overlay已显示，但导航字体颜色无变化
• 设置top:10px无法移动Overlay
• 尝试同时选中锚点标签与.title类时，锚点样式未生效

原代码 #

HTML #

<body>
  
  <div class="header">
      <div class="top-line">
        <h5>Buy now & pay later with Afterpay</h5>
      </div>
   </div> 
    
    <div class="container">
 
 <div class="info">                    
        <div class="left">
          <img src="https://i.ibb.co/wsCyQ98/Coozy-Shoes-removebg-preview.png" alt="logo">
            
          </div>
        <div class="middle-side">
          <a href="#">Shoes</a>
          <a href="#">Sale</a>
          <a href="#">Our Team</a>
        </div>
        <div class="right-side">
          <a href="#">Account</a>
          <a href="#"><i class="fa fa-search" style="font-size:36px"></i>
          </div>
      </div>
      
      <div class="title"></div>

CSS #

.title {
      height: 150px;
background-color: white;
position: absolute;
top: 10px;
color: white;
width: 100%;
font-size: 25px;
      /*padding-top: 20px;
padding: 15px 0;*/
text-align: center;
z-index: -1;
transition: 0.8s;
        }

.container:hover .title, a {
z-index: 0;
color: black;
        }

修复后的代码 #

修复后HTML（补全未闭合标签） #

<body>
  
  <div class="header">
      <div class="top-line">
        <h5>Buy now & pay later with Afterpay</h5>
      </div>
   </div> 
    
    <div class="container">
      <div class="info">                    
        <div class="left">
          <img src="https://i.ibb.co/wsCyQ98/Coozy-Shoes-removebg-preview.png" alt="logo">
        </div>
        <div class="middle-side">
          <a href="#">Shoes</a>
          <a href="#">Sale</a>
          <a href="#">Our Team</a>
        </div>
        <div class="right-side">
          <a href="#">Account</a>
          <a href="#"><i class="fa fa-search" style="font-size:36px"></i></a>
        </div>
      </div>
      
      <div class="title"></div>
    </div>
</body>

修复后CSS #

.container {
  position: relative;
}

.title {
  height: 150px;
  background-color: white;
  position: absolute;
  top: 60px;
  width: 100%;
  font-size: 25px;
  text-align: center;
  z-index: -1;
  transition: all 0.8s ease;
}

.container:hover .title {
  z-index: 0;
}

.container:hover .info a {
  color: white;
}

问题原因与修复说明 #

1. Overlay无法移动：原代码中.container未设置position: relative，导致绝对定位的.title以整个文档为参照，而非.container。添加position: relative后，.title的top值会相对于.container生效。
2. 导航字体颜色无法修改：原CSS选择器.container:hover .title, a逻辑错误，逗号分隔的选择器为独立个体，相当于选中所有a标签而非悬停状态下的导航链接。修正为.container:hover .info a后，仅对悬停时的导航链接生效。
3. 锚点样式未生效：同上，错误的选择器逻辑导致样式未绑定到目标元素，修正选择器后即可正常生效。

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