title: Passing click through transparent div and the woes of jQuery hover
body: <p>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.</p>
  
  <p>Here inlies the problem:</p>
  
  <p>I used the CSS <code>pointer-events: none;</code> as to allow the click to go through to the video.  However, when <code>pointer-events:none;</code>, jQuery doesn't recognize the <code>mouseenter</code>, and assumes the mouse has left, thereby not letting me click on the (now) draggable object.</p>
  
  <p>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 is very inefficient as this is only a small part of the website.  I'd rather not approach it this way.</p>
  
  <p>Any ideas?</p>
  
  <p>Edit:
  Any ideas?
  No code necessary.</p>