Question

我正在尝试为列表中的每个div创建详细信息。

到目前为止，这个列表可能很长。

所以，这就是我到目前为止所做的：

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

我现在有一些问题，这是更好的方法吗？

并且它没有使用最后一个div追加它我认为它是因为next()，我该如何解决？

我有点迷失在这里。

Thanjs！

Answer 1

我会在身体上创建div并绝对定位它而不是将其附加到下一个div。

您可以使用position获取您正在悬停的div的位置，然后使用它来设置详细信息div的top和left css值

像这样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();
});

将丹尼尔斯的建议考虑在内，以便首先隐藏div然后定位并显示。

Answer 2

如果细节是静态信息，那么最好将它们设为'display：none'，并仅在用户“悬停”div时显示。因为做你正在做的事太昂贵了。

使用append来创建细节

2 个答案: