title: Start/Pause HTML5 Video When Other Element Hovered
body: <p>Just trying to get a video to play when another "overlay" div is hovered. Some background on the issue, I have several videos on the page and when hovered, they play. </p>
  
  <p>All works fine until I've added a div that lays above the video. Once I've added a second "overlay" div on top of the video, the code below no longer works because I'm not technically hovered on the video anymore.</p>
  
  <p>I'm using the overlay div on top of the video to put some information about it.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var figure =  $('.movies');
  var vid = $("video");
  var cover = $(".video-overlay");
  [].forEach.call(vid, function (item) {
      item.addEventListener('mouseover', hoverVideo, false);
      item.addEventListener('mouseout', hideVideo, false);
  });
  function hoverVideo(e) {  
      this.play();
  }
  function hideVideo(e) {
      this.pause();
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I adjust this to say "If hovered on div class .video-overlay, start the video. If not hovered, pause."</p>