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

例如，我如何才能仅显示文本中的颜色＆＃34;＆＃34;如果我把它悬停在它上面是红色的？我认为你必须与照片编辑器结合使用，但我真的不知道如何。谢谢你的帮助

这是我试过的代码。

<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的示例：

{{1}}

：悬停更改用户将鼠标悬停在图标上时图片的外观。请注意背景图像是不同的，一个图标可以处于每个状态。我还添加了＆＃34;光标：指针＆＃34;假设此图标将是某种按钮。

Answer 2

由于图像是黑白的，您可以使用它。

＆＃13;

.red:hover {
  filter: contrast(50%) sepia(100%)  saturate(100) hue-rotate(-10deg);
}

＆＃13;

<img class="red" src="http://www.iconsdb.com/icons/preview/black/linkedin-4-xxl.png">

＆＃13;

Answer 3

这是一个简单的例子： https://jsfiddle.net/oowjwLru/

这可以通过在图像后面放置彩色div，然后使用以下简单的jQuery自动隐藏div并在鼠标结束时显示它来轻松实现：

HTML：

<img id="imgLogo" src="http://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>

的Javascript / jQuery的：

$(document).ready(function(){
    $("#divColor").hide();
    $("#imgLogo").mouseover(function() { 
        $("#divColor").show();
    });
});

Answer 4

您可以使用svg（调整大小没有问题）并在悬停时更改填充颜色

HTML：

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

的CSS：

svg:hover #linkedin { 
  fill: red; //or #ff0000
}

在svg中，路径必须具有id“linkedin”才能更改颜色

<path id="linkedin" fill="#000" d="M49.265,[...],10.11V46.304z"/>

Answer 5

我必须使用带魔术棒的paint.net将图标内的文字留空。我也删除了边缘的白色。使用以下代码，当我将鼠标悬停在其上时，我将图标中的颜色或图标内容从白色更改为红色

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


#icons img {
   width: 5vw;
   padding: 0;
}

#icons img:hover {
   background-color: red;
   border-radius: 100%;
   overflow: hidden;
}

如何在图标内部着色文本

5 个答案: