Passing click through transparent div and the woes of jQuery hover

So I have a transparent div which lies over a draggable youtube video. While the youtube video is draggable, you can't pause/play the video. My solution to this is take a div that's the size of the buttons (bottom of the video), and when a user hovers over it, the object is no longer draggable. When the cursor leaves, the object is now draggable again. You can still click on the bulk of the video to drag it.

Here inlies the problem:

I used the CSS pointer-events: none; as to allow the click to go through to the video. However, when pointer-events:none;, jQuery doesn't recognize the mouseenter, and assumes the mouse has left, thereby not letting me click on the (now) draggable object.

I could do some hacks to check the mousemovement to see if it moves into that area, but that's tedious and in general having a function called every time the mouse is moved i开发者_开发问答s very inefficient as this is only a small part of the website. I'd rather not approach it this way.

Any ideas?

Edit: Any ideas? No code necessary.

I think it would be simpler to put one transparent div covering everything and then handling the drag of the video yourself using the mousedown/move/up handlers in the transparent div instead of doing all this trickery for the buttons. It is also much easier to maintain if the embedded div needs to be changed.

Just be careful that IIRC Internet Explorer ignores events for a totally transparent div (!).

It depends upon how much control you have over the drag mechanism. It sounds like you wrote it. If so, you're doing it backwards. Instead of blocking the area you don't want draggable, you need to enable the area you do want draggable - or put another way, you need to place a div in the draggable area to act as a "drag handle".

I don't really know what else you can do. You can put event handlers on the surrounding DOM or even the document.body itself, but that won't help you determine between the drag-area and non-drag area.

If my solution doesn't work for you, you have to check the mouse x/y location. Yes it's a hassle and slightly expensive, but you occasionally have to do such things when working with external foreign code that you have no control over such as Flash.

Why not just make the div that overlays the youtube video not cover the buttons at all? That way when the mouse moves off of the main "drag" div to go to the buttons, dragging can stop and the click will just be on the youtube element itself?