社交媒体链接的背景色延伸到其他链接，并且与其他链接重叠

Question

我想将蓝绿色悬停在社交媒体链接的边界内。我尝试过通过CSS属性调整填充以及高度和宽度，但是当悬停时，它仍会重叠在右边框上。

这是不悬停时的样子：

这是悬停时的样子：

图像大小均为19px×15px。

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

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