Jquery to change background color of div on hover?

[Danny9]

Hi, I’ve been Googling a bit but haven’t found a simple answer and must carry on with other tasks now (Boss breathing down my neck :) ) so if anyone has a simple routine or link to a routine to make a divs background color change on mouse over and then change back to the original color on mouse out I’d be grateful if they could post it here for me to grab and use later. Thanks very much. Cross browser compatible, ideally.

[ozee]

Here is a link that will do what you are asking. https://css-tricks.com/snippets/jquery/addingremoving-class-on-hover/ What you need to do is create a class that has the background color you want, of course you can always animate this as well.

[Chris Coyier]

$("div").hover(function() { // mouseenter

$(this).addClass("hover");

}, function() { // mouseleave

$(this).removeClass("hover");

});

You CAN alter CSS directly with jQuery with the .css() method, but as @ozee said, adding CSS classes is far more flexible (and faster, and… hotter).

[Author]

Posts