Question

Please take a look here: http://jsfiddle.net/ZUd27/7/

What I need:

• There are several elements. One of them is active and visible.
• If I hover over any inactive element, it becomes visible and active. The previously active element becomes inactive.
• On mouseout, nothing happens – the last hovered element stays active.

My problems:

• The first active element always stays active (in DOM?). It becomes invisible, but on next mouseover nothing happens.
• Other elements don’t behave as they should. If one of them is active, on next mousein it becomes invisible.

thx

Answer 1

You are pretty close to the solution, I think.

Instead of doing this:-

$(".slogan_switch_item:not(.active)").hover(function(){
   ...
});

… do this:-

$(".slogan_switch_item:not(.active)").live('hover',function(){
   ...
});

I managed to get it working properly by changing this one line.