jQuery change hover on color, then return back to original color

Question

I've got some buttons on a page whose color is changed via jQuery, illustrating which one's active. I'd like to add a color change ONLY when hovering, after which it's returned to the original color (which is dictated by jQuery) when left.

I first used css: .showlink li:hover {color:#aaa;} which works appropriately except for that when the pages are switched and jQuery changes the colors, it superceeds the CSS.

Then I decided to use simple jQuery that says when something's hovered on, change it's color. this doesn't completely work because it permanently changes the color. To mitigate this, I added in a bit to the function that returns it to a different color.

is there some way I can return it to the original color from before it was changed on hover?

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

Solution 1

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

will superceede everything else.

Solution 2

I'd recommend using an array to record the original color value, and use that in the mouseleave (second) function of hover():

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 could also use addClass() and removeClass():

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

JS Fiddle demo.

Which would simply use CSS to apply the changed colour, and wouldn't require any kind of local storage of the CSS colour to reimplement it on mouseleave.

Solution 3

Although it may be best to use CSS for this, there are times when JavaScript is preferred for one reason or another. Even if CSS is always batter, the concept below should help you with other things in the future as well. So, that being said:

On hover, before changing color, get the current color and store it in the element's data. On hover-out, read that 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') );
        }
    );
} );

Solution 4

when I have issues like this where original data on an element is lost, I call myElement.setAttribute("oldcolor",myElement.style.color) before changing it, and when I want to revert, I just set it to that. myElement.style.color = myElement.getAttribute("oldcolor")

View more solutions