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

Question

我正在更新我的网站并使用了本文如何使用HTML和CSS在我的网站上显示社交图标？在我的网站上添加一些社交媒体图标。

现在我想知道如何实现悬停效果（即更改不透明度）。我知道这应该只是几行代码，但是我不知道如何实现（CSS初学者）

Answer 1

如果要使用class定位特定元素，则像这样（CSS）.email：

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

如果您想要更通用的解决方案，请为所有元素都提供相同的类（.icon在此示例中）并执行以下操作：

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

您可能需要阅读CSS 级联和继承。