Question

我的页脚中有一些社交媒体图标需要在悬停时从白色变为黄色。我设法产生了效果，只是在顶部有一个额外的不受欢迎的图标，它仍然是白色的。

以下是我所做的一个例子：

HTML

<li>
  <a class="facebook" href="link" target="_blank">
   <img src="images/00_social media icons/facebook_white.png">
  </a>
</li>

CSS

.facebook{
     background-image: url('images/00_social media icons/facebook_white.png');
     background-repeat:no-repeat;}

.facebook:hover{
     background-image: url('images/00_social media icons/facebook_yellow.png');
     background-repeat:no-repeat;}

提前谢谢！

Answer 1

请注意，您既可以将图标作为锚点中的独立图像，也可以作为锚点的背景图像。只需删除img标签（并确保您的锚具有合适的尺寸以显示背景图像）

Answer 2

为您的按钮使用div而不是img，并将background-image规则应用于它而不是包裹a。

DEMO：http://jsbin.com/puqej/3/edit

HTML：

<ul>
  <li>
    <a href="link" target="_blank">
      <div class="facebook">Facebook
      </div>
    </a>
  </li>
</ul>

CSS：

.facebook {
  width: 100px;
  height: 40px;
  background-image: url('http://placekitten.com/200/80');
  background-repeat: no-repeat;
  background-size: 100px 40px;
  text-indent: -9999px;
}

.facebook:hover {
  background-image: url('http://placekitten.com/210/90');
}

li {
  list-style: none;
}

Answer 3

尝试在CSS中执行类似的操作：

.facebook {
  display: inline-block;
  background-image: url('images/00_social media icons/facebook_white.jpg');
  background-repeat:no-repeat;
  width: 20px;
  height: 20px;
  background-size: 20px;
}
.facebook:hover {
  background-image: url('images/00_social media icons/facebook_yellow.jpg');
  background-repeat:no-repeat;
}

在HTML中：

<li>
  <a href="link" target="_blank">
    <div class="facebook">
    </div>
  </a>
</li>

重要的是尽量不要在这里发布uglified代码。

使用背景图像在悬停时更改图标的颜色

3 个答案: