Home/ Questions/Q 434485
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T20:16:45+00:00

I have a page with a list of elements display (items) – which are

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    $('.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.

    • 0