jQuery - 悬停时改变颜色的亮度

时间:2014-09-25 08:18:22

标签: jquery button dynamic hover brightness

嗯,我有一个社交图标列表,例如。

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

我们得到了这个:

enter image description here

现在我想创建一个脚本,在悬停时为每个图标增加背景颜色的亮度,而不是让我手动编写带有颜色代码的新CSS行进行悬停。

此外,我不想使用任何其他CSS方法,如不透明度,图像蒙版或滤镜。它应该全部来自JS。

2 个答案:

答案 0 :(得分:2)

这应该是你想要的:

http://jsfiddle.net/u41qxo1e/

我创建了帮助函数来变暗/变亮(有了这个,你不需要任何新的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)

只使用Javascript,您可以参考上一个问题:

Increase CSS brightness color on click with jquery/javascript?

我希望它有所帮助。