2

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.

Hann
  • 69
  • 2
  • 8
  • without writing any new code, I don't think it is possible – Arun P Johny Sep 25 '14 at 08:20
  • I am sure that could be a way of jQuery to detect the background colors of the icons and then increase the brightness of that color somehow ... – Hann Sep 25 '14 at 08:26

2 Answers2

2

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)); 
      });
Xavjer
  • 8,838
  • 2
  • 22
  • 42
  • Maybe you'll find what you want here: http://stackoverflow.com/questions/8287806/how-to-use-jquery-to-fade-in-out-li-ahover-css-background-color – Xavjer Sep 25 '14 at 10:29
1

Using just Javascript you can refer to this previous question:

Increase CSS brightness color on click with jquery/javascript?

I hope it help.

Community
  • 1
  • 1
Andrea Turri
  • 6,480
  • 7
  • 37
  • 63