Mouse hover question

I’m trying to implement some jquery to prevent mousewheel scrolling when a jQuery fancybox window is open for the background content.

I’ve got the jQuery mousewheel plugin installed but no matter what I can not get this to work with the overlay div.

Here is the code that I currently have:


jQuery("#fancybox-overlay").hover(function() {	
				alert("hi"); //Test
				hovered = true;
			}, function() {
				hovered = false;
			});
			
			jQuery(window).bind("mousewheel", function() {
				if (hovered === true) {
					return false;
				}
			}); 


With this code, when I open a fancybox window, and hover over the overlay (which is 100% width, height, except for the fancybox itself) nothing happens, don’t get the alert message indicating the hover event has been triggered.

If I apply this same code to a normal div on my website, and hover over it then this alert message will display, and scrolling will be disabled when the cursor is within the confines of the div.

Any ideas why I can’t achieve the "hover’ event with the overlay div? Or suggestions on how to get this to work?

Many thanks.

The hover event works by using mouseenter and mouseleave, I think.
That might mean that the mouse never enters, and so the function isn’t triggered.

Try this:


var hovered = false;
jQuery("#fancybox-overlay").mouseover(function() { 
    alert("hi"); //Test
    hovered = true;
}).mouseout(function() {
    hovered = false;
});

That might not be the nicest solution though, as it will now set hovered to true every single time you move the mouse while the fancybox is displayed. And the mouseout event may also not be triggered.

You best bet is probably to change the fancybox code to set and unset the hovered variable.