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?

Я надеюсь, что это поможет.