I'm having a problem with the mosueenter/mouseleave events only in Firefox...
<HTML>
<HEAD>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.js"></script>
<script>
$(document).ready(function() {
$("#theDiv").mouseenter(function() {
$("#output").append('mouseenter<br>');
});
$("#theDiv").mouseleave(function() {
$("#output").append('mouseleave<br>');
});
});
</script>
</HEAD>
<BODY>
<div id="theDiv" style="position:relative; height: 300px; width:300px; background-color:Black;">
<input type="text" style="position:absolute; top: 40px;" />
<div style="position:absolute; top:100px; height:100px; width:100px; background-color:Red; overflow:auto;">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div id="output"></div>
</BODY>
</HTML>
I only want to know when the mouse has left the containing DIV. But if you either move the mouse over a textbox really fast or move the mouse over the scrollbar of a div, the events fire.
--EDIT--
$("#theDiv").hover(function() {
$("#output").append('hoverin<br>');
}, function() {
$("#output").append('hoverout<br>');
});
I tried the following with hover. It seems to suffer from the same issue only in Firefox.