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.
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);
});