title: jQuery hover function with keyword: 'this'
body: <p>I have trouble understanding and using the $(this) keyword.  For example, with the hover class example from <a href="http://api.jquery.com/hover/" rel="nofollow">http://api.jquery.com/hover/</a></p>
  
  <p>HTML</p>
  
  <pre><code> &lt;ul&gt;
      &lt;li&gt;Milk&lt;/li&gt;
      &lt;li&gt;Bread&lt;/li&gt;
      &lt;li class='fade'&gt;Chips&lt;/li&gt;
      &lt;li class='fade'&gt;Socks&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class='fade'&gt;My Div&lt;div&gt;
  </code></pre>
  
  <p>JQUERY</p>
  
  <p>This will add the function over All <code>&lt;li&gt;</code> elements.</p>
  
  <pre><code>$("li").hover(
      function () {
          $(this).append($("&lt;span&gt; ***&lt;/span&gt;"));
      },
      function () {
          $(this).find("span:last").remove();
      }
  );
  </code></pre>
  
  <p>If I only want to add the function over the fade class.
  I was able to do it this way</p>
  
  <pre><code>$("li.fade").hover(
      function () {
          $(this).append($("&lt;span&gt; ***&lt;/span&gt;"));
      },
      function () {
          $(this).find("span:last").remove();
      }
  );
  </code></pre>
  
  <p>This selects ALL fade classes including the DIV</p>
  
  <pre><code> $("li").hover(
          function () {
              $('.fade').append($("&lt;span&gt; ***&lt;/span&gt;"));
          },
          function () {
              $('.fade').find("span:last").remove();
          }
      );
  </code></pre>
  
  <p>Why won't this work?</p>
  
  <pre><code>$("li").hover(
      function () {
          $(".fade", this).append($("&lt;span&gt; ***&lt;/span&gt;"));
      },
      function () {
          $(".fade", this).find("span:last").remove();
      }
  );
  </code></pre>
  
  <p>I'm learning trying to learn jQuery. Thanks!</p>