Question

我有一套黑色的png图标。当用户将鼠标悬停在它们上方时，我希望图标变为蓝色。如何使用css将它们转换为蓝色？我试过css过滤器，但它不会改变我的颜色。这是黑色图标

以下是我希望它如何悬停

Answer 1

简答：无法使用css过滤器为图像的特定部分将颜色从灰色更改为蓝色。

使用过滤器只有几个方面可用： https://developer.mozilla.org/en-US/docs/Web/CSS/filter

filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

Answer 2

使用FontAwesome！

使用此链接链接HTML文档头部的样式表。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

之后，您可以访问this链接以获取所有图标的参考。

要完成您想要的任务，您可以使用以下代码。

.circle {
  height: 50px;
  width: 50px;
  background-color: #eff2f7;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
}

.icon {
  display: inline-block;
  position:relative;
  top: calc(50% - 8px);
}

.icon:hover {
  color: blue;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
	<head>
		<meta charset="utf-8">
		<title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	</head>
	<body>
		<div class="circle">
    <i class="fa fa-twitter icon"></i>
    </div>
	</body>
</html>

使用css过滤器将黑色图标更改为蓝色

2 个答案: