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

Answer 2

仅使用 Javascript 可以参考上一个问题：

Increase CSS brightness color on click with jquery/javascript?

希望对你有帮助。