Question

Ok, let’s say that I have multiple links on a page and I want links to change background color when you roll over them. I would use this code:

$(function() {
    $('a').mouseover(function() {
        $('a').css('background-color', 'black');
    });
}); 
$(function() {
    $('a').mouseleave(function() {
        $('a').css('background-color', 'white');
    });
});

the problem with this code is that when you roll over one a, all of the links change color. I could give each a a specific ID and make a specific function for each, but is there a more efficient way to do this?
Edit: Additionally, what could I do to set the original background color back to the way it was. If I turn the background back to white, It might not have been white in the first place. How could I fix this?

Answer 1

Just so you know, you’re all going about it the long and hard way.

// this is like document.onload = function, 
//  this only needs to be called once, you can put 
//  all your jQuery in this one function
$(function() {
    // the following is a call to all `a` links to add jQuery's own .hover function
    // see -> http://api.jquery.com/hover/
    $("a").hover(function(eIn) { // this first function is the action taken when
                                 // user hovers over the link
        $(this).css({ 'background-color': '#000', 'color': '#fff' });
    }, function(eOut) { // this second function is what happens 
                        // when user hover away from the link
        $(this).css({ 'background-color': '', 'color': '' });
    });
});

​See WORKING Fiddle

ALSO, YOU DONT NEED JQUERY FOR THIS, USE CSS

In CSS:

a:hover {
    background-color: #000;
    color: #fff;
}​

See it in CSS ONLY HERE