Question

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

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

Answer 1

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

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

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

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

您可能想了解一下CSS cascading and inheritence。

Answer 2

您只需按照以下代码执行此操作：

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

Answer 3

div:hover{ do: something }

详细了解css selectors here

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

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

更具体

Answer 5

您可以使用:hover伪类：

.social:hover{opacity: .7;}

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

5 个答案: