jquery mouseover / mouseout problem

Question

I have a page with a list of elements display (items) - which are drawn dynamically, hence the live. When a user rolls over an item, I would like them to switch to a class that is "on" and then when they roll-off (mouseout) the item goes back to normal. The items turn on with the line of code below, but do not turn off. Suggestions?

$('.item').live('mouseover', function(){$(this).switchClass('item','item_on', 500);});
$('.item_on').live('mouseout', function(){$(this).switchClass('item_on','item', 500);});

Thanks!

Answer 1

$('.item').live('mouseover',
function(){$(this).addClass('item_on');});
$('.item').live('mouseout',
function(){$(this).removeClass('item_on');});

Also, I think that for switchClass to work, you need to include jQuery UI after jquery, but before your script, what could be happening is the mouse is going out of the .item element, before the .item_on element is created by the delay.

Also, I think what you are looking for, instead of a delayed switchclass that might not trigger the live event handler, try using http://cherne.net/brian/resources/jquery.hoverIntent.html instead, with the above addClass / removeClass.