Change jQuery color to color and then return to original color

Question

I have several buttons on a page whose color is changed through jQuery, illustrating which one is active. I would like to add a color change ONLY when hovering, after which it reverts to the original color (which is dictated by jQuery) when it remains.

At first I used css: .showlink li:hover {color:#aaa;} , which works accordingly, except when the pages switch and jQuery changes colors, it is superior to CSS.

Then I decided to use simple jQuery, which says when something freezes, change its color. this does not fully work because it is constantly changing color. To reduce this, I added a little to the function, which returns it to a different color.

Is there a way to return the original color before it was changed when you hover over it?

 // Changes color on hover $(function() { $('.showlink').hover(function(){ $(this).css('color', '#aaa'); }, function(){ $(this).css('color', '#f3f3f3'); }); }); //Changes color depending on which page is active, fades that page in $(function(){ $('#show_one').css('color', '#ffcb06'); $('#two, #three').hide(); }); $('.showlink').click(function(){ $('.showlink').css('color', '#f3f3f3'); $(this).css('color', '#ffcb06'); var toShow = this.id.substr(5); $('div.page:visible').fadeOut(600, function(){ $('#' + toShow).fadeIn(600); }); }); 

Answer 1

 .showlink li:hover {color:#aaa !important;} 

will exceed everything else.

Answer 2

I would recommend using an array to write the original color value and use it in the mouseleave (second) of the hover() function:

 var originalColors = []; // Changes color on hover $(function() { $('.showlink').hover(function(){ originalColors[$(this).index('.showlink')] = $(this).css('color'); $(this).css('color', '#aaa'); }, function(){ $(this).css('color', originalColors[$(this).index('.showlink')]); }); }); 

JS Fiddle demo .

You can also use addClass() and removeClass() :

 // Changes color on hover $(function() { $('.showlink').hover(function(){ $(this).addClass('hovered'); }, function(){ $(this).removeClass('hovered'); }); }); 

JS Fiddle demo .

To simply use CSS to apply the changed color and would not require any local storage of the CSS color to override it on mouseleave .

Answer 3

Although it might be better to use CSS for this, there are times when JavaScript is preferable for one reason or another. Even if CSS always beats, the concept below will help you with other things in the future. So this is said:

When hovering, before changing the color, get the current color and save it in the element data. When hovering, read this color back.

Demo:

http://jsfiddle.net/JAAulde/TpmXd/

Code:

 /* Changes color on hover */ $( function() { $( '.showlink' ).hover( function() { /* Store jQuerized element for multiple use */ var $this = $( this ); $this /* Set the pre-color data */ .data( 'prehovercolor', $this.css( 'color' ) ) /* Set the new color */ .css( 'color', '#aaa' ); }, function() { /* Store jQuerized element for multiple use */ var $this = $( this ); $this /* Set the color back to what is found in the pre-color data */ .css( 'color', $this.data( 'prehovercolor') ); } ); } ); 

Answer 4

when I have similar problems, when the initial data about the element is lost, I call myElement.setAttribute("oldcolor",myElement.style.color) before changing it, and when I want to return, I just installed it. myElement.style.color = myElement.getAttribute("oldcolor")

Answer 5

Use jQuery . mouseout () , this is like inverting .hover (). If the mouse enters the .showlink element and then exits again, .mouseout () is called.

  $('.showlink').hover(function(){ $(this).css('color', '#aaa'); } $('.showlink').mouseout(function(){ $(this).css('color', '#bbb'); }