html - 如何给图标内的文字着色

Question

我想问一下，如果我将鼠标悬停在上面，是否可以为下面链接的图标添加颜色？

https://www.google.ch/search?q=linkedin&source=lnms&tbm=isch&sa=X&ved=0ahUKEwilrciPwpPVAhUEWhQKHYX7CxcQ_AUICigB&biw=1920&bih=949#tbm=isch&q=linkedin+black+icon&imgrc=eCztS3qV_QYT9M

例如，如果我将鼠标悬停在文本“in”上，我如何才能使它的颜色仅为红色？我想你必须结合照片编辑器来做，但我真的不知道怎么做。感谢帮助

这是我试过的代码。

<section id="icons">
   <a href="#"><img src="youtube.png" class="youtube" alt=""></a>
</section>


.youtube {
 background-image: url(youtube.png);
 width: 5vw;
 position: absolute;
 }

.youtube:hover {
 background-image: url(youtubehover.png);
 width: 5vw;
 position: absolute;
 }

Answer 1

最好的方法是创建两个单独的图像。一个用于图标处于默认状态时，另一个用于图标处于悬停状态时。在悬停状态下，将颜色更改为您喜欢的任何颜色，在您的示例中为红色，以便当用户将鼠标放在它上面时，他们会看到该颜色。

这里是一些 CSS 的例子:

#icon {
background-image: url(../images/example_default.png)
width: 150px;
height: 150px;
position: absolute;
}

#icon: hover {
background-image: url(../images/example_hover.png)
width: 150px;
height: 150px;
position: absolute;
cursor: pointer;
}

:hover 更改用户将鼠标悬停在图标上时图像的外观。请注意背景图像是不同的，图标可能处于的每种状态都有一个背景图像。我还添加了 cursor: pointer 假设此图标将是某种按钮。