Can I have hovers, but not clicks pass through an element to the item below?

I have a video element, and on top of it is a #video-overlay div, which is dynamically absolutely positioned to be on top of the video. the overlay needs to accept clicks, which is working fine, but I'd like a hover effect to affect the video.

I'd like to also be able to hover specific parts of the vi开发者_如何学运维deo-overlay, but I'm not sure if that's possible.

You could probably just daisy chain the events.

something like...

$("#overlay").bind('mouseenter', function(){
  $("#video").trigger("mouseenter");
});

$("#overlay").bind('mouseout', function(){
  $("#video").trigger("mouseout");
});

$('something').live('mouseover mouseout',
        function(event){
            if (event.type == 'mouseover') {
                //mouseover fn
            }
            else {
               //mouseout fn
            }
        }
);