Unable to target next div in DOM using jQuery

Question

I am currently having a little trouble using jQuery to locate the next div in the DOM. I suspect it might be due to the <div> I am targeting from, being contained within the <a> tag.

What I'm aiming for is the div class="div_name" to appear during the time the user is hovering over the div class="island_hover"

HTML:

<div id="interactive_map">
<a href="#"><div class="island_hover" id="1"></div></a>
    <div class="div_name" id="id1"><p>id1</p></div>
<a href="#"><div class="island_hover" id="2"></div></a>
    <div class="div_name" id="id2"><p>id2</p></div>
<a href="#"><div class="island_hover" id="3"></div></a>
    <div class="div_name" id="id3"><p>id3</p></div>
<a href="#"><div class="island_hover" id="4"></div></a>
    <div class="div_name" id="id4"><p>id4</p></div>
<a href="#"><div class="island_hover" id="5"></div></a>
    <div class="div_name" id="id5"><p>id5</p></div>
<div id="interactive_map_close"></div>

jQuery:

$('.island_hover').hover(function() {
    $(this).next('.div_name').fadeToggle(600);
});

I have been looking around and have tried the method .nextAll but to no avail. I hope somebody will be able to assist.

Answer 1

next() looks for siblings around the current node's parent node.

From the documentation:

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

You need to do

$('.island_hover').hover(function() {
    $(this).parent().next('.div_name').fadeIn(600);
});