title: How to select .not(this) inside a particular element
body: <p>I have created a function that fades in some descriptive information when an <code>li</code> element is clicked. The function fades the new information within the list.  The line that is not working is <code>$(".hover").not(".hover", this).fadeOut(200).removeClass("not-me");</code> and understand that it is down to <code>.not(".hover", this)</code>.</p>
  
  <p>I have tried <code>.not(this)</code> but this is not working correctly. Presumably because the <code>this</code> part of it is still selected from the <code>li</code> element, originally from the click function <code>$("ul li").click(function() {</code>.</p>
  
  <p>Is there a way to use <code>.not(".hover", this)</code> successfully?</p>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$("ul li").click(function() {
  
    // Remove other divs with element currently shown
    $(".hover").not(".hover", this).fadeOut(200).removeClass("not-me");
  
    // Stop chosen element from fading out
    $(".hover", this).addClass("not-me").fadeIn(200);
  
  });
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;li&gt;
    &lt;div class="hover"&gt;
       &lt;h3&gt;Header&lt;/h3&gt;
       &lt;p&gt;Shot but breif description, cut me off if you need to.&lt;/p&gt;
     &lt;/div&gt;
     &lt;img src="/images/1.jpg" alt="" /&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;div class="hover"&gt;
       &lt;h3&gt;Header&lt;/h3&gt;
       &lt;p&gt;Shot but breif description, cut me off if you need to.&lt;/p&gt;
     &lt;/div&gt;
     &lt;img src="/images/2.jpg" alt="" /&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;div class="hover"&gt;
       &lt;h3&gt;Header&lt;/h3&gt;
       &lt;p&gt;Shot but breif description, cut me off if you need to.&lt;/p&gt;
     &lt;/div&gt;
     &lt;img src="/images/3.jpg" alt="" /&gt;
  &lt;/li&gt;
  </code></pre>