Question

i’m trying to create details for each div that i have in a list.

just to now, this list can be very long.

so, this is what i have done so far:

examp:

html:

<div class='pics'>1</div>
<div class='pics'>2</div>
<div class='pics'>3</div>
<div class='pics'>4</div>
<div class='pics'>5</div>
<div class='pics'>6</div>

js:

$("div.pics").live("mouseover", function(){
    var $this = $(this);
    var details = "<div id='details' style='border: solid red 1px; width: 300px; height: 300px; position: absolute;'>Detalhes do usuario</div>";
    $this.next().append(details);
});

$("div.pics").live("mouseout", function(){
    if($("#details").length){
        $("#details").remove();
    }
}); 

Made a live example

i have some question now, this is the better way to something like that?

and its not working the append with the last div i think its because the next(), how can i fix that ?

i’m kinda lost here.

Thanjs!

Answer 1

I would create the div on the body and absolutely position it rather than append it to the next div.

You can use position to get the position of the div you are hovering over and use that that to set the top and left css values for the details div

Something like this http://jsfiddle.net/infernalbadger/9HBsh/12/

$("div.pics").live("mouseover", function(){
        var position = $(this).position();
        $('#details').css({top: position.top + 10, left: position.left + 110})
                     .show();        
});

$("div.pics").live("mouseout", function(){
    $('#details').hide();
}); 

Taken Daniels advice into account so the div is hidden first then positioned and shown.