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以外的任何内容）来为绝对定位的伪元素建立包含块

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我修复了你的小提琴，给#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背景

3 个答案: