Javascript Div rollovers

Question

I am using Jquery - is there a simple way to change the background color on a div when a user rolls over it?

Answer 1

You can do this with CSS:

#myDiv:hover { background-color: red; }
//or...
div:hover { background-color: red; }

If you need IE6 support and such and have to use jQuery, toggle a class, like this:

.hover { background-color: red; }

Then use .hover() and .toggleClass(), like this:

$(".myDivs").hover(function() {
  $(this).toggleClass('hover');
});

Answer 2

You could use the .hover() event:

$('#divid').hover(function() {
    // mouse enter
    $(this).css('background-color', 'red');
}, function() {
    // mouse leave
    $(this).css('background-color', 'blue');
});

Answer 3

I think mouseenter & mouseleave is better than hover. Why? Bubbling reason ;)

if($.browser.msie && $.browser.version < 7) {
    $('element').bind({
        mouseenter:function(){ $(this).addClass('over'); }, 
        mouseleave:function(){ $(this).removeClass('over');}
    });
}

After this, you can simply add some CSS magic:

#element.over,
#element:hover {
/* do something */
}