如何使用悬停按钮更改图标不透明度答案

【问题标题】：How to change an icon opacity with hover button如何使用悬停按钮更改图标不透明度
【发布时间】：2016-04-06 02:19:02
【问题描述】：

我刚刚学习 HTML 和 CSS 一个月，所以我的问题是一个非常基本的问题。

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

我尝试了两种选择，改变图形和改变不透明度，但我得到的是图标区域处于活动状态，而不是整个按钮区域。

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

【问题讨论】：

请分享更多你尝试过的东西。请在 StackOverflow 帮助中心阅读如何在本网站上提问。
你能添加你的css吗？

标签： css button hover opacity

【解决方案1】：

如果我理解正确的话，你要做的事情只有在你对整个图像有绝对控制权的情况下才能完成。这意味着，它不能是图像，而只能是 Web 图标或 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的链接

如果我误解了，请告诉我。

【讨论】：