javascript - 在列表项旁边对齐 div

Question

我正在尝试创建 div 元素并在其上动态打印元素。我创建了 a demo显示我到达的位置。

我的代码的问题是它没有显示在我想要的列表旁边。相反，它显示在底部。是否可以在我悬停的元素旁边显示新的 div？

$(".bubble").live({
    mouseenter : function() {
        $("#bubble").show();
        $("#bubble").html($(this).attr('id'));
    },
    mouseleave : function() {
        $("#bubble").empty();
    }
});

#bubble{
    width:100px;
    height:20px;
    background-color:#666666;
    position:absolute;
    display:hidden;
}

<ul>
    <li><span class="bubble" id="test1">test1</span></li>
    <li><span class="bubble" id="test2">test2</span></li>
    <li><span class="bubble" id="test3">test3</span></li>
    <li><span class="bubble" id="test4">test4</span></li>
    <li><span class="bubble" id="test5">test5</span></li>
</ul>
<div id="bubble"></div>

Answer 1

您需要设置 #bubble 相对于鼠标悬停在 li 上的位置。试试这个:

$("ul").on('hover', '.bubble', function(e) {
    if (e.type == 'mouseenter') {
        var $el = $(this);
        $("#bubble")
            .html($el.attr('id'))
            .css({
                top: $el.offset().top,
                left: $el.offset().left + $el.width()
            })
            .show();
    }
    else {
        $("#bubble").empty();
    }
});

Example fiddle

请注意，我已经删除了 live() 的使用，因为它已被弃用，而是将 on() 与委托(delegate)一起使用。我还使用了 hover 事件。