CSS 文本问题的背景

Question

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

我用这个来说明我的观点：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或在悬停的link上增加padding/margin可能会影响布局

相反，我们可以使用::before/::after伪元素来达到想要的效果。可以通过定位伪元素 absolutely 并使用 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 元素必须具有 relative 的 position（除 static 之外的任何值）才能为绝对定位的伪元素建立包含块-元素。

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

#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>

Answer 2

我修复了你的 fiddle 给 #menu a:hover,

的绝对定位

看看http://jsfiddle.net/maio/65466g17/5/,

position: absolute 将元素从文档流中取出，因此它不会影响任何其他元素

Answer 3

使用列表获得负边距可能很棘手。一个漂亮的转变怎么样？

#menu a {
    text-decoration:none;
    color:black;
    padding: 20px 15px;
    white-space:nowrap;
    display: inline-block;
    height: 60px;
    box-sizing: border-box;
    transition: transform 0.3s; /* adjust transform duration here */
}
#menu a:hover {
    color:#fff;
    background:red;
    -webkit-transform: scale(1.2); /* adjust transform size here */
    -ms-transform: scale(1.2); /* adjust transform size here */
    transform: scale(1.2); /* adjust transform size here */
}

Demo

CSS 文本问题的背景

CSS background on text issue

html

css

menu