我想问一下，如果我将鼠标悬停在下面链接的图标上，是否有办法为它添加颜色？
例如，如果我将鼠标悬停在文本“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;
}
【问题讨论】：
最好的方法是创建两个单独的图像。一种用于图标处于默认状态时，另一种用于图标处于悬停状态时。在悬停状态下，将颜色更改为您喜欢的任何颜色，在您的情况下为红色，这样当用户将鼠标放在它上面时，他们会看到该颜色。
下面是一些 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，假设此图标将是某种按钮。
【讨论】：
您可以使用 svg（调整大小没有问题）并在悬停时更改填充颜色。
svg路径必须有id="linkedin"才能改变颜色。
svg:hover #linkedin {
fill: red; //or #ff0000
}<svg enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<path d="M30.071,27.101v-0.077c-0.016,0.026-0.033,0.052-0.05,0.077H30.071z"/>
<path id="linkedin" fill="#000" d="M49.265,4.667H7.145c-2.016,0-3.651,1.596-3.651,3.563v42.613c0,1.966,1.635,3.562,3.651,3.562h42.12 c2.019,0,3.654-1.597,3.654-3.562V8.23C52.919,6.262,51.283,4.667,49.265,4.667z M18.475,46.304h-7.465V23.845h7.465V46.304z M14.743,20.777h-0.05c-2.504,0-4.124-1.725-4.124-3.88c0-2.203,1.67-3.88,4.223-3.88c2.554,0,4.125,1.677,4.175,3.88 C18.967,19.052,17.345,20.777,14.743,20.777z M45.394,46.304h-7.465V34.286c0-3.018-1.08-5.078-3.781-5.078 c-2.062,0-3.29,1.389-3.831,2.731c-0.197,0.479-0.245,1.149-0.245,1.821v12.543h-7.465c0,0,0.098-20.354,0-22.459h7.465v3.179 c0.992-1.53,2.766-3.709,6.729-3.709c4.911,0,8.594,3.211,8.594,10.11V46.304z"/>
</g>
</svg>
<path id="linkedin" fill="#000" d="M49.265,[...],10.11V46.304z" />【讨论】：
由于图片是黑白的，所以可以用这个。
.red:hover {
filter: contrast(50%) sepia(100%) saturate(100) hue-rotate(-10deg);
}<img class="red" src="https://www.gravatar.com/avatar/034851bd177962980fdc2f79b08c7639?s=48&d=identicon&r=PG&f=1">【讨论】：
我必须使用带有paint.net 的魔杖将图标内的文本设为空白。我还删除了边缘的白色。使用以下代码，当我将鼠标悬停在图标上时，我将文本或图标内的内容的颜色从白色更改为红色。
<section id="icons">
<a href="#"><img src="yourimage.png" alt=""></a>
</section>
CSS：
#icons img {
width: 5vw;
padding: 0;
}
#icons img:hover {
background-color: red;
border-radius: 100%;
overflow: hidden;
}
【讨论】：
这可以通过在图像后面放置一个彩色 div 来轻松完成，然后使用以下简单的 jQuery 自动隐藏 div 并在鼠标悬停时显示它：
$(document).ready(function() {
$("#divColor").hide();
$("#imgLogo").mouseover(function() {
$("#divColor").show();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="imgLogo" src="https://www.iconsdb.com/icons/preview/black/linkedin-4-xxl.png" alt="icon" height="100" width="100" style="position:absolute:top:-100px;">
<div id="divColor" style="background-color:red;width:60px;height:60px;position:absolute;left:30px;top:28px;z-index:-1;"></div>【讨论】：