jquery for loop: for each hovered link show related hidden div next to hovered link

Question

Would like a for loop in jquery so that:

"For every hover_link: show hidden div next to hovered hover_link."

Current jquery doesn't display the hidden div let alone position the hidden div next to the hovered link and can't figure out how to loop this for multiple hover_links.

jquery:

$(document).ready(function() {
    $(".hover_link").mousemove(function(e) {
        $("#box1").show();
        $(".box").css({
            top: ($(".hover_link").offset().top() + 10) + "px",
            left: ($(".hover_link").offset().left() + 10) + "px"
        });
    });
    $(".hover_link").mouseout(function(e) {
        $("#box1").hide();
    });
});​

Fiddle: http://jsfiddle.net/3kWq7/1/

Many thanks to anyone who can help

Answer 1

replace mousemove with mouseenter

ideally you want to use on (http://api.jquery.com/on/)

to make it more dynamic, you can add rel attribute to the area which can contain the id of the box you want to show for that particular area. then you just need to grab the rel attribute and show the corresponding box

Update

I added rel to the html on the area tag and wrote your mouse handlers using .on(). I put comments in so I hope you understand what is going on http://jsfiddle.net/3kWq7/3/

Answer 2

So! In the end the problem was that I had the jquery running on a div that was within a centred fixed width div on the page.

To get around this I basically detected the html document width, subtracted the fixed width of the div, then divided the remainder by two, giving me the left margin that I needed to offset my mouse calculation by in order to get the hidden div to pop up next to the mouse no matter what the window size was.

The header of the site is also a fixed size, so I subtracted it's height from my mouse position to get the hidden to div to position correctly on the other axis.

The for loop was not necessary it turns out - so to get it to pop up different hidden divs depending on the linked area hovered over, I implemented the suggestion from @Huangism using the rel="boxID" attribute. (Thanks @Hunagism!)

Final fiddle: http://jsfiddle.net/3kWq7/10/

Final result: http://jsfiddle.net/3kWq7/10/embedded/result/

Final jquery:

$(document).ready(function(){
    $(".hover_link").mousemove(function(e){         
        $($(this).attr('rel')).show();
        var padding = parseInt(jQuery("#page").css("margin-right"));
        var margin = $(document).width() - 900;
        var marginleft = margin / 2;        
            $(".box").css({             
            top: (e.pageY - 200) + "px",             
            left: (e.pageX - marginleft + 10) + "px"        
        });    
    });     
    $(".hover_link").mouseout(function(e){         
        $($(this).attr('rel')).hide();   
    });
});