Question

I am trying to find the next div using Jquery. Here is the 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);
});


<a href="media.html"><div class="menu-item"><h1>Media</h1></div></a>
<div id="tooltip-media">Sights and sounds from Cambodia</div>

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

Simple. The toolip-* divs are hidden in css. I want the next one in the code to show on hover of the menu-item. 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.

Answer 1

try this

$(this).parent().next('div').stop(true, true).fadeIn(300);

in your example , you are trying to find next div but it is not sibiling of menu item.
that only it did not work. traverse to parent and find next div it will work.

parent() , next()