Html 如何使用CSS向图标添加悬停效果？

我正在更新我的网站，并使用本文向我的网站添加了一些社交媒体图标

---

现在我想知道，如何实现悬停效果，即更改不透明度。我知道这应该只有几行代码，但如果你想用类来针对特定元素，我不知道如何实现CSS初学者像这样的CSS。电子邮件：

如果需要更通用的解决方案，请在本例中为所有元素指定samen class.icon，并执行以下操作：

.icons:hover {
    // Your code here
    opacity: .5;
}

---

您可能想了解CSS。

您只需通过以下代码即可做到这一点：

.className:hover (or) #id:hover{
opacity:0.5;
}

了解有关

的更多信息您可以使用：hover伪类：

.social:hover{opacity: .7;}

---

您不需要不透明度，也可以使用“显示”属性。这将适用于包含类图标的图像的所有标签

我添加了蓝色背景作为图像的替代

Html:

---

编辑：使选择器比标签更具体

谢谢，但有更通用的方法吗。我真的不喜欢为每个人都添加此代码的想法icon@user1420042您没有为每个图标添加任何代码。只需给所有图标一类图标，你的图标CSS规则将应用于该类的所有元素。谢谢@Joe，我编辑了我的评论以反映另一种方法。

div:hover{ do: something }

.social:hover{opacity: .7;}

<label class="labelWithIcon"><img class="icon" />test</label>

.labelWithIcon .icon{
    display:none;
    width:10px;
    height:10px;
    background-color:blue;
}

.labelWithIcon:hover .icon{
    display:inline;
}

.labelWithIcon{
    padding-left:10px;
}

.labelWithIcon:hover{
     padding-left:0px;   
}