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

Question

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

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 完成。

Answer 1

这应该是你想要的:

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