嗯,我有一个社交图标列表,例如。
HTML
<ul class="social-icons">
<li><a href="#"><i class="facebook-icon"></i></a></li>
<li><a href="#"><i class="twitter-icon"></i></a></li>
<li><a href="#"><i class="googleplus-icon"></i></a></li>
</ul>
CSS
.social-icons {
display:inline-block;
color:#FFF;
}
.facebook-icon {
background: #3b5998;
}
.twitter-icon {
background: #00aced;
}
.googleplus-icon {
background: #dd4b39;
}
我们得到了这个:
现在我想创建一个脚本,在悬停时为每个图标增加背景颜色的亮度,而不是让我手动编写带有颜色代码的新CSS行进行悬停。
此外,我不想使用任何其他CSS方法,如不透明度,图像蒙版或滤镜。它应该全部来自JS。
答案 0 :(得分:2)
这应该是你想要的:
我创建了帮助函数来变暗/变亮(有了这个,你不需要任何新的js库)
$( ".social-icons li a i" ).hover(
function() {
//OnHover
$( this ).css("background-color", LightenDarkenColor(rgb2hex($( this ).css("background-color")), 20));
}, function() {
//AfterHover
$( this ).css("background-color", LightenDarkenColor(rgb2hex($( this ).css("background-color")), -20));
});
答案 1 :(得分:1)