Question

我正在使用html5-boilerplate_v8制作静态HTML网页，并且遇到了障碍。

我使用透明背景的PNG添加了4个社交媒体图标，并且希望将图像的背景悬停在上方时变成白色。

现在，一个图标的HTML如下所示：

<div class="channels">
      <a class="channels__item" href="https://www.facebook.com/person.name" target="_blank"><img
          src="img/icons8-facebook-50.png" alt="facebook" width=40 height=40></a>

CSS如下所示：

.channels {
  margin: 0 auto;
  padding-top: 10px;
}

.channels__item {
  margin-left: 5px;
  margin-right: 5px;
}

.channels__item:hover {
  background-color: #fff;
}

发生的事情是，当我将鼠标悬停在图标上时，宽度是正确的，但高度仅是图标的一半左右（居中于图标中间）。

相反，我需要高度从图标的顶部延伸到底部，与宽度的行为方式保持一致。

我已经看到导航菜单（设置为无序列表）的类似问题，但是如您所见，我的情况应该更简单...

可悲的是，经过各种尝试，唯一起作用的就是将10px的填充添加到悬停状态。这实际上看起来还不错，但是当鼠标悬停在图标上时，图标会水平移动（这看起来很荒谬）。另外，它感觉很hacky，我敢肯定必须有更好的方法。

我很确定此高度遵循的是文本尺寸而不是图标尺寸，但是由于某些原因，我不知道如何解决它。感谢您的任何建议！

Answer 1

在display: inline-block;类中使用.channels__item。有关显示标签here的更多信息

.channels {
  margin: 0 auto;
  padding-top: 10px;

}

.channels__item {
  margin-left: 5px;
  margin-right: 5px;
    display: inline-block;
}

.channels__item:hover {
  background-color: rgb(209, 32, 32);
}

<div class="channels">
    <a class="channels__item" href="https://www.facebook.com/person.name" target="_blank"><img
          src="https://image.flaticon.com/icons/svg/1312/1312139.svg" alt="facebook" width=40 height=40></a>
        <p>
</div>

悬停时增加背景色高度

1 个答案: