$('#homefeature').mouseleave(function() { literally does not work?

[sethwb]

I've had this problem with other sites as well since I started using jQuery a year ago - the function simply does not work as expected.

I have also tried the jQuery mouseout as a substitute and it literally does not do anything, not even an alert will fire when I wave my mouse in any manner, frantically or otherwise over the specified element, which have always been div's with an ID.

Is there some trick to getting this to work or what the heck am I doing wrong!? Here is the function in its entirety:

$('#homefeature').mouseleave(function() {
document.getElementById('homefeaturepics').style.display = "";
document.getElementById('homefeaturecontent').style.display = "none";
});

or

$('#homefeature').mouseout(function() {
document.getElementById('homefeaturepics').style.display = "";
document.getElementById('homefeaturecontent').style.display = "none";
});

If there are no obvious problems or workarounds to this situation that people know if I'll pull the code together for you to look at. I really appreciate any advice or ideas.

Thanks!

[harbingerOTV]

$('#homefeature').mouseleave(function() {
	$('#homefeaturepics, #homefeaturecontent').css({'display' : 'none'});
});

try that?

[sethwb]

I've tried that. I've also tried a basic alert('hi'); and that doesn't work either.

[harbingerOTV]

so this:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { 	
$('#homefeature').mouseout(function() {
     alert("yo!");
});
});
</script>
<div id="homefeature" style="height: 100px; background: #9de; margin: 0 0 10px 0;">home feature</div>

doesn't even work for you?

Maybe show the whole code?

[sethwb]

That is correct. It's going to take me a minute to get it together the server is down

[sethwb]

Thank you for your help. Although you probably didn't realize it you helped me by putting it inside a $(document).ready function. That took care of it not firing, however it is still pretty buggy.

Basically whenever You hover over one of 5 navigation images it's content slides out below the nav. I tried setting the mouseleave function for a containing div that holds both the nav, and the content for each one.

My problem now is that whenever you leave the containing div, it does not always hide the individual nav content as expected, only some of the time. The faster I move my mouse off, the less likely it is to work. I have a hunch its something to do with the div resizing as the nav content appears, but I'm not 100% sure yet.

[sethwb]

I guess my next question for you is where can I find an event bubbling tutorial/bible?

I need to get this drop down content to work nicely, but right now the mouseleave is acting very rude. I think I'm going to take a look around and if I don't find anything I'll post this question in a new topic.