社交媒体链接的背景颜色延伸到其他链接并与它们重叠答案

【问题标题】：Background color of social media links extends to other links and overlaps them社交媒体链接的背景颜色延伸到其他链接并与它们重叠
【发布时间】：2019-11-11 07:14:34
【问题描述】：

我想将蓝绿色悬停在我的社交媒体链接的边界内。我已经尝试通过 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>

【问题讨论】：

jsfiddle.net/VVj3R

标签： html css

【解决方案1】：

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

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

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

您可能想将黑色更改为其他颜色，只要它是不透明的颜色即可。

PS 图片没有显示在您的小提琴中，因为您使用了相对路径名。

【讨论】：

很抱歉应该上传它们。效果很好，谢谢

【解决方案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/

【讨论】：