jQuery - изменение яркости цветов при наведении

Например, у меня есть список социальных иконок.

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.


button dynamic jquery hover brightness
person Hann    schedule 25.09.2014    source источник
comment
без написания нового кода, я не думаю, что это возможно   -  person Arun P Johny    schedule 25.09.2014
comment
Я уверен, что это может быть способ jQuery определить цвета фона значков, а затем каким-то образом увеличить яркость этого цвета...   -  person Hann    schedule 25.09.2014

Ответы (2)


arrow_upward
2
arrow_downward

Это должно быть о том, что вы хотите:

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)); 
      });
person Xavjer    schedule 25.09.2014
comment
Возможно, вы найдете здесь то, что хотите: stackoverflow.com/questions/8287806/ - person Xavjer; 25.09.2014

arrow_upward
1
arrow_downward

Используя только Javascript, вы можете обратиться к этому предыдущему вопросу:

Увеличить цвет яркости CSS при нажатии с помощью jquery/javascript?

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

person Andrea Turri    schedule 25.09.2014