title: How do I properly use the jQuery off() method to remove the mouseenter and mouseleave events off an element
body: <p>I seem to be having some trouble removing some events from an element using the jQuery off() method. I want to remove the mouseenter and mouseleave events when I match a certain criteria. </p>
  
  <p>Heres what I got.</p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/GE7Wg/" rel="nofollow">http://jsfiddle.net/GE7Wg/</a></p>
  
  <p>On the above fiddle, Article 2 should NOT have a mouseenter/mouseleave event associated with it.</p>
  
  <p>Thanks!</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;   
      &lt;input type="hidden" id="HiddenMediaID" value="450"&gt;
  
      &lt;article class="Article"&gt;
          Article 1                
          &lt;input type="hidden" class="LatestMediaID" value="200" /&gt;
      &lt;/article&gt;
  
      &lt;article class="Article"&gt;
          Article 2
          &lt;input type="hidden" class="LatestMediaID" value="450" /&gt;
      &lt;/article&gt;
  
      &lt;article class="Article"&gt;
          Article 3
          &lt;input type="hidden" class="LatestMediaID" value="700" /&gt;
      &lt;/article&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2>jQuery</h2>
  
  <pre><code>//Page loaded - jQuery Ready
  $(document).ready(function () {   
      //User hovering over article. Change BG.
      $(document).on('mouseenter', '.Article', function () {
          $(this).css('background', '#F0F8FF');
      }).on('mouseleave', '.Article', function () {
          $(this).css('background', '#FFFFFF');
      });
  
      //Set active BG color if condition is met.
      $('.LatestMediaID').each(function () {
          var LatestMediaID = $(this).val();     
  
          //Disable mouseenter and mouseleave events on the matched Article.
          if (LatestMediaID == $('#HiddenMediaID').val()) {
              //Disable events.
              $(document).off('mouseenter', $(this).parent());
              $(document).off('mouseleave', $(this).parent());
  
              //Change BG color to light blue.    
              $(this).parent().css('background', '#F0F8FF');
          }
      });
  });
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>.Article {
      width: 150px;
      height: 35px;
      line-height: 35px;
      margin: 10px;
      background-color: #FFFFFF;
      border: 1px solid #CCCCCC;
      text-align: center;    
  }
  </code></pre>
  
  <p>​</p>