Question

我一直在研究HTML和CSS一个月，所以我的问题非常基本。

我需要制作一个带有灰色轮廓的白色按钮，并且图标在其初始状态下设置为0.3难度。当按钮悬停时，图标变为黑色，但按钮的不透明度没有变化。

我尝试过两种选择，改变数字和改变不公平，但我得到的是图标区域是活动的，而不是整个按钮区域。

<p><a href="#" class="button_facebook" ><img src="img/facebook_black.png" alt=""></a></p>

Answer 1

如果我理解正确，那么只有当你对整个图像有绝对的控制权时才能做到。这意味着，它不能是图像，而只能是网络图标或svg图像。这样您就可以控制颜色。我的建议是使用font awesome库。我通过在这里使用（图像和图标）概念来证明其差异：

<div class="container">
  <p><a href="#" class="button_facebook" >
    <img src="http://i.stack.imgur.com/kNPKJ.gif" alt=""></a>
  </p>

  <p>
    <a href="#" class="button_facebook" >
      <i class="fa fa-facebook facebook-icon"></i>
    </a>
  </p>
</div>

CSS

.container{
  width:200px;
  text-align:center;
  padding:10px;
}

.button_facebook img{
  width:36px;
  opacity:0.3;
}

.facebook-icon{
  color: #000;
  background:#fff;
  border: 1px solid #888;
  padding: 8px 10px 6px;
  border-radius:50px;
  opacity:0.3;
}

.button_facebook:hover .facebook-icon{
  background:#000;
  color: #fff;
  opacity:1;
}

.button_facebook:hover img{
  opacity:1;
}

以下是DEMO

的链接

如果我误解，请告诉我。

如何使用悬停按钮

1 个答案: