如何使用 CSS 为图标添加悬停效果？ [关闭]答案

【问题标题】：How can I add a hover effect to icons with CSS? [closed]如何使用 CSS 为图标添加悬停效果？ [关闭]
【发布时间】：2013-03-19 00:57:09
【问题描述】：

我正在更新我的网站并使用这篇文章How can I display social icons on my website with HTML and CSS? 将一些社交媒体图标添加到我的网站。

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

【问题讨论】：

标签： html css hover effects

【解决方案1】：

如果您想使用类.email 定位特定元素，请像这样（CSS）：

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

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

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

您可能想了解 CSS cascading and inheritence。

【讨论】：

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

【解决方案2】：

您可以通过以下代码简单地做到这一点：

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

【讨论】：

【解决方案3】：

div:hover{ do: something }

了解更多关于css selectors here

【讨论】：

【解决方案4】：

你不需要不透明度，你也可以使用 display 属性。这适用于所有带有内部类图标的图像的标签。

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

Demo

HTML：

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

CSS：

.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;   
}

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

【讨论】：

【解决方案5】：

您可以使用:hover 伪类：

.social:hover{opacity: .7;}

【讨论】：