Jquery find next (specified) element not working
<p>I am trying to find the next div using Jquery. Here is the code:</p>

<pre><code>$('.menu-item').hover(function() {
  $(this).stop(true, true).addClass("menu-item-hover", 300);
  $(this).next('div').stop(true, true).fadeIn(300);
}, function() {
  $(this).stop(true, true).removeClass("menu-item-hover", 300);
  $(this).next('div').stop(true, true).fadeOut(300);
});


&lt;a href="media.html"&gt;&lt;div class="menu-item"&gt;&lt;h1&gt;Media&lt;/h1&gt;&lt;/div&gt;&lt;/a&gt;
&lt;div id="tooltip-media"&gt;Sights and sounds from Cambodia&lt;/div&gt;

&lt;a href="about.html"&gt;&lt;div class="menu-item"&gt;&lt;h1&gt;About&lt;/h1&gt;&lt;/div&gt;&lt;/a&gt;
&lt;div id="tooltip-about"&gt;Who in the world is the Phillips Family?&lt;/div&gt;
</code></pre>

<p>Simple. The <code>toolip-*</code> divs are hidden in css. I want the next one in the code to show on hover of the <code>menu-item</code>. I have checked other questions and none of them work for my case. I am using both Jquery and Jquery UI. Thanks for any help.</p>
