Question

    #box {
    width:200px;
    height:50px;
    background-clip:padding-box;
    position:relative;
    margin:0;
    left:1.4em;
    background:rgba(0,0,0,1);
    float:right;
    z-index:200;
}

#boxlist li {
    height:50px;
    width:20px;
    position:relative;
    list-style-type:none;
    display:inline-block;
    bottom:1em;
    margin-left:-2.5em;
    float:left;

}
.imgli:hover{
    background:rgba(0,255,255,1);
}
.imgli {
    border-left: 1px solid rgba(153,153,153,1);
    padding-right:4em;
}

.imgli:first-child {
    left:-0.1em;
    border:none;
}
.imgli:nth-child(2) {
    left:1em;
}

.imgli:nth-child(3) {
    left:2em;
}

    <header>
<div id="box">
    <ul id="boxlist">
        <li class="imgli"><img src="images/banner-social-icon-twitter.png" class="boximg"></li>
        <li class="imgli"><img src="images/banner-social-icon-facebook.png" class="boximg"></li>
        <li class="imgli"><img src="images/banner-social-icon-email.png" class="boximg"></li>
        </ul>

</div>

</header>

.imgli是带图像的

。 #boxlist是。 - 这是在没有悬停时的样子：http://i.imgur.com/YbWSMWO.png - 这是悬停时的样子：http://i.imgur.com/lZE5ZiV.png 图像大小均为19x15 我已经尝试调整css属性的填充和高度/宽度，但是当悬停时它仍然重叠在右边框上。我想在边框

中包含'teal'悬停

Answer 1

我相信重叠正在发生，因为 margin-left：-2.5em结合容器的固定宽度，尽管你的元素是浮动的，你仍然会遇到重叠。如果不对布局进行详细的修改，一种解决方案是将背景颜色应用于<li>以防止重叠，请参阅我对您的小提琴所做的更新： http://jsfiddle.net/VVj3R/1/

我刚刚将背景线添加到.imgli的定义中，它似乎有效。

.imgli {
    border-left: 1px solid rgba(153,153,153,1);
    padding-right:4em;
    background-color:black;
}

您可能希望将黑色更改为其他内容，只要它是不透明的颜色。

PS因为您使用了相对路径名称，图像没有出现在您的小提琴中。

Answer 2

尝试让您的代码更简单..像这样：

<div id="box">
  <ul>
    <li><div class="button" id="btn1"></div></li>
    <li><div class="button" id="btn2"></div></li>
    <li><div class="button" id="btn3"></div></li>
  </ul>
</div>

CSS：

#box ul {
  margin: 20px;
  padding: 0px;  
}

#box li {
  float: left;
  display: block;
  background: #ededed;
  padding: 1px;  
}

#box .button {
  width: 50px;
  height: 50px; 
  background-color: #000;  
}

#box .button:hover {
  background-color:rgba(0,255,255,1);  
}

#btn1 {
  background-image: url(someicon.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40px 40px;  
}

这是小提琴： http://jsfiddle.net/tb2Ug/

css列表导航悬停重叠

2 个答案: