javascript - On hover, find a matching class from a set of divs and assign a class name to a match (jquery/js) -

javascript - On hover, find a matching class from a set of divs and assign a class name to a match (jquery/js) -

js/jquery newbie here. i'm trying create in interactive map markers absolutely positioned on page , when hovered over, related info pane should appear on top left part of screen. preferably, fade in , fade out on mouse out. i've tried various things nil seems work. here simplified markup should show i'm trying do:

<div class="body"> <div class="links"> <span class="one">1</span> <span class="two">2</span> <span class="three">3</span> <span class="four">4</span> </div> <div class="panel"> <span class="one"> 1</span> <span class="two">2</span> <span class="three">3</span> <span class="four">4</span> </div> </div>

css:

.body .panel span{ display:block; width:100px; height:100px; background:red; margin:10px; text-align:center; display: none; color:white; } .links span{ display: block; } .body .panel span.visible{ display: block; }

some jquery i've been trying understand. got somewhere around here

$(document).ready(function(){ $(".links span").hover(function() { var index = $(this).index(); $(".panel span").each(function() { $(this).eq(index).toggleclass("visible"); }); }); });

just made fiddle

$(".links span").hover(function() { var index = $(".links span").index($(this)); $(".panel span").eq(index).toggleclass("visible"); });

as want display related span, it's not necessary utilize each().

and farther info mentioned you're new js/jquery - it's (in case, not in general) possible utilize this instead of $(this) - var index = $(".links span").index(this); - both homecoming same result. this dom object in context of hover() callback function, $(this) jquery object. illustrate difference , same result, i've added console message both in adjusted fiddle.

as reference nice article "this" - http://remysharp.com/2007/04/12/jquerys-this-demystified

javascript jquery html fadein interactive