-3

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

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

4

5 回答 5

8

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

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

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

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

您可能想了解 CSS级联和继承。

于 2013-03-28T14:25:28.147 回答
1

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

.className:hover (or) #id:hover{
opacity:0.5;
}
于 2013-03-28T14:26:35.373 回答
1 
div:hover{ do: something }

在此处了解有关CSS 选择器的更多信息

于 2013-03-28T14:27:02.103 回答
1

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

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

演示

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

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

于 2013-03-28T14:30:23.913 回答
0

您可以使用:hover伪类：

.social:hover{opacity: .7;}
于 2013-03-28T14:28:09.280 回答