jQuery | stop event happening if already over parent element

JavaScript
1

I have a problem that suprisingly I[/I] only affects IE.

I have a hover/mouseover event when a users cursor enters a div, but because there is text inside my div IE is replaying the event if I hover in/out of the area that has text even though it is in the same div.

This is what I have:


$('.reason-1').mouseover(function(){		
		$('#first-r').stop(true, true).fadeIn(600);			
		$('#first-r-info').stop(true, true).delay(400).fadeIn(800);		
	});	
	$('.reason-1').mouseout(function(){		
		$('#first-r').fadeOut(1000);			
		$('#first-r-info').fadeOut(400);		
	});			



<ul class="reasons">

<li class="reason reason-1">
<h3>Title</h3>
<p>Summary text area</p>

<div class="overlaytxt"><a href="link" class="reason-over-link">&nbsp;</a></div>
</li>

etc...
</ul>

So my quest how can I stop IE playing the action again if the user is still inside the same list element?

Any help is really apprciated, thanks

2

quest? Let’s do this in the spirit of The Internet Oracle

Dear supplicant, your quest can come to an end as there is an answer that can fulfill this long wanted need.
jQuery provides some events called .mouseenter() and [url=“http://api.jquery.com/mouseleave/”].mouseleave() that can solve the problem you are facing.

Go forth now with this knowledge and use it only for the purposes of good.
You owe the Oracle flameproof underwear.

3

Haha!, thanks for the reply, it was supposed to say ‘question’ but I only noticed after it was too late to edit. Thanks though I’ll give this a try later today and let you know how it goes.