CODEWITHSUNDEEP
jquerybuttondynamichoverbrightness
Hann
Hann

Reputation: 69

jQuery - Changing brightness of the colors when hovering

Well, I have a social icon list, for example.

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

And we get this :

enter image description here

Now I want to make a script that will increase the brightness of the background color for every icon when hovering, without having me manually writing new CSS lines with color codes for hover.

Also I don't want to use any others CSS methods like opacity, image masks or filters. It should be all done from JS.

Upvotes: 2

Views: 3271

Answers (2)

Xavjer
Xavjer

Reputation: 9234

This should be about what you want:

http://jsfiddle.net/u41qxo1e/

I created helper functions to darken/lighten (with this, you do not need any new js libraries)

$( ".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)); 
      });

Upvotes: 2

Andrea Turri
Andrea Turri

Reputation: 6500

Using just Javascript you can refer to this previous question:

Increase CSS brightness color on click with jquery/javascript?

I hope it help.

Upvotes: 1

Related Questions