title: Add CSS class on hover using jQuery
body: <p>I'm trying to add a CSS class on hover to an element using jQuery. However, the class should only be applied to the closest element with a specific class so I tried using <code>.next</code></p>
  
  <p>When I add the <code>.next</code> to my code though the class isn't added anymore (it works without that part of the code). This is the code:</p>
  
  <pre><code>$j('.products_overlay').hover(function(){
      $j(this).next('.hover_text').addClass('overlay_text'); 
  }, function(){
      $j(this).next('.hover_text').removeClass('overlay_text');
  });
  </code></pre>
  
  <p>Any idea what I'm doing wrong?</p>
  
  <p>This is the HTML</p>
  
  <pre><code>&lt;div class="products_overlay"&gt;
      &lt;a href="..." title="product1" class="product-image"&gt;
          &lt;img src="...." alt="product1" class="hover_test" /&gt;
      &lt;/a&gt;
      &lt;p class="hover_text"&gt;Test&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>