html中菜单触碰变色,利用css filter实现菜单图片变色效果

需求场景

在制作菜单时，未增加响应效果，往往会加入鼠标移入移出时字体和图标进行变色的效果，字体的颜色变化比较好控制，通过color便可以设置，但如果图标是使用的图片，往往要一个图标制作两份不同颜色的图片，还需要javascript代码进行动态替换，比较繁琐。所以在项目中我们寻求一种比较简单、易于需求变更后进行维护的方式。

使用css filter进行实现

准备图片

假设我们的原始图片主色调为 #1296DB

制作一个简单的无背景色的横向菜单

为菜单添加背景(大多菜单栏都会有背景)

ul.horMenu {

list-style: none;

margin: 0;

padding: 0;

background-color: #5C9CCC;

}

ul.horMenu > li {

display: inline-block;

height: 32px;

padding: 0 8px;

line-height: 32px;

cursor: pointer;

}

ul.horMenu > li > img {

height: 32px;

width: 32px;

padding: 8px;

box-sizing: border-box;

display: inline-block;

vertical-align: top;

}

ul.horMenu > li > span {

color: white;

display: inline-block;

vertical-align: top;

}

效果图：

此时，我们的图片已经与背景搭配的不是那么协调。

通过css filter改变图片颜色为白色 主要通过filter: brightness(100);语句：

ul.horMenu > li > img {

height: 32px;

width: 32px;

padding: 8px;

box-sizing: border-box;

display: inline-block;

vertical-align: top;

filter: brightness(100);

}

之后菜单效果为：

添加菜单移入移出效果，鼠标移入背景变为浅色，字体和图标变为#1296DB

ul.horMenu > li:hover {

background-color: #E6F7FF;

}

ul.horMenu > li:hover img {

filter: brightness(0);

filter: grayscale(0);

}

ul.horMenu > li:hover > span {

color: #1296DB;

}

图片部分主要是搭配使用：filter: brightness(0); filter: grayscale(0);

最终效果：

注意：filter属性在老旧IE浏览器下并为得到很好的支持，因此使用时一定要注意。