html - 文本问题的 CSS 背景

Question

我正在创建一个对用户悬停有影响的水平菜单。当用户将鼠标悬停在链接上时，它会创建一个比菜单横幅本身大一点的红色背景。

我用这个来说明我的观点:http://jsfiddle.net/65466g17/

我尝试使用填充和边距，但无济于事。这种情况还有其他替代方案吗？

HTML:

<div id="menu-outer">
    <div id="menu">
        <ul id="horizontal-list">
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">PRODUCTS</a></li>
            <li><a href="#">MONITORING</a></li>
            <li><div id="imgBox"><a href="#"></a></div></li>
            <li><a href="#">TESTIMONIALS</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </div>
</div>

CSS

#menu-outer {          
    background-color: rgba(0,0,255,0.6);
    z-index:100;
    position:absolute;
    top:80px;
    width:100%;    
    min-width: 1200px;
    max-height: 60px;        
}

#menu {
    display: flex;
    align-content: center; 
    justify-content: center;                
    font-family: "Menu Font", "Info Box",Verdana;
    font-weight: 800;    
    font-size:medium; 


}

ul#horizontal-list {       
    list-style: none;
    padding:0; 

}

ul#horizontal-list li {
    display: inline-block;    
}

#menu a{
    text-decoration:none;       
    float:left;    
    color:black;
    padding:2px 15px;    
    white-space:nowrap;
}

#menu a:hover{ 
    color:#fff;
    background:red;
    padding:30px 5px;
    margin-top: -28px;       
}

Answer 1

可以看出，增加height或添加 padding/margin悬停的链接可能会影响布局。

相反，我们可以使用 ::before/::after伪元素来达到预期的效果。可以通过定位伪元素 absolute 来完成。和玩top/right/bottom/left偏移量如下:

#menu a {
    text-decoration:none;       
    float:left;    
    color:black;
    padding:1em;    
    white-space:nowrap;
    position: relative;
}

#menu a:hover {
    color: #fff;
}

#menu a:hover:before {
    content: "";
    position: absolute;
    top: -.5em;
    bottom: -.5em;
    left: 0;
    right: 0;
    background:red;
    z-index: -1;
}

请注意，在本例中，a元素必须有 position的 relative (static 以外的任何值)为绝对定位的伪元素建立一个包含 block 。

此外，添加 z-index: -1我们的伪元素使它们出现在链接内容的后面。

#menu-outer {          
  background-color: rgba(0,0,255,0.6);
  z-index:100;
  position:absolute;
  top:80px;
  width:100%;    
  min-width: 1200px;
  max-height: 60px;        
}

#menu {
  display: flex;
  align-content: center; 
  justify-content: center;                
  font-family: "Menu Font", "Info Box",Verdana;
  font-weight: 800;    
  font-size:medium; 


}

ul#horizontal-list {       
  list-style: none;
  padding: 0; 
  margin: 0; 
}

ul#horizontal-list li {
  display: inline-block;    
}

#menu a{
  text-decoration:none;       
  float:left;    
  color:black;
  padding:1em;    
  white-space:nowrap;
  position: relative;
}

#menu a:hover {
  color: #fff;
}

#menu a:hover:before{
  content: "";
  position: absolute;
  top: -.5em;
  bottom: -.5em;
  left: 0;
  right: 0;
  background:red;
  z-index: -1;
}

<div id="menu-outer">
  <div id="menu">
    <ul id="horizontal-list">
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">PRODUCTS</a></li>
      <li><a href="#">MONITORING</a></li>
      <li><div id="imgBox"><a href="#"></a></div></li>
      <li><a href="#">TESTIMONIALS</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </div>
</div>