title: Bind mouseenter and mouseleave events to multiple elements with same class
body: <p>I have a number of elements <code>div.teaser</code> that each contain a video wrapped with mediaelementplayer. On mouseenter and mouseleave I want the video to play <code>media.play</code> and stop <code>media.stop</code> respectively.</p>
  
  <p>HTML looks like this:</p>
  
  <pre><code>&lt;div class="teaser"&gt;
      &lt;a href="#"&gt;
         &lt;video&gt;...&lt;/video&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="teaser"&gt;
      &lt;a href="#"&gt;
         &lt;video&gt;...&lt;/video&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  [... and so on]
  </code></pre>
  
  <p>The problem is that if I hover any of the elements they all fire the event. Current jquery is:</p>
  
  <pre><code>$('video').mediaelementplayer({
      features: [],
      loop: false,
      enableAutosize: true,
      alwaysShowControls: false,
      iPadUseNativeControls: false,
      iPhoneUseNativeControls: false, 
      AndroidUseNativeControls: false,
      alwaysShowHours: false,
      showTimecodeFrameCount: false,
      pauseOtherPlayers: true,
  
      success: function(media, domElement, player) {      
          $(".teaser").on({
              mouseenter: function() {
                  media.play();
              },
              mouseleave: function() {
                  media.stop();
              }
  
          });
  
      } // Success     
  }); // mediaelementplayer
  </code></pre>
  
  <p>At a guess I need to tell the function to bind to <code>$(this)</code> <code>div.teaser</code>. I've tried a number of options but none seem to stick. </p>
  
  <p><a href="http://jsfiddle.net/snerone/e62bb70d/13/" rel="nofollow">JSFiddle</a></p>