对齐列表项旁边的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()与委托来代替。我还使用了hover事件。

Answer 2

如果你给<ul>和<div>以下样式它应该工作。

display: inline; 
float: left; 

Answer 3

希望这有助于：

JS-Fiddle Demo

我的#bubble追加到李

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

      } 
    }); 

Answer 4

做什么云母说，也拆除的位置是：绝对的;

所以CSS应该

#bubble{ 
width:100px; 
height:10px; 
background-color:#666666; 
display:hidden; 
display: inline; 
float: left; 
} 

ul{ 
display: inline; 
float: left; 
} 

http://jsfiddle.net/y44dR/21/

Answer 5

怎么样一个纯CSS的解决方案吗？

HTML：

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

CSS：

ul li div { 
    width: 100px; 
    height: 10px; 
    background-color: #666666; 
    position: absolute; 
    display: none; 
} 

ul li:hover div { 
    display: inline; 
} 

的jsfiddle：http://jsfiddle.net/H2ZMc/

Answer 6

尝试这种情况：

var bubble = $("#bubble"); 

$(".bubble").live({ 
    mouseenter : function(e) {  
     $("#bubble").html($(this).attr('id')); 
     e.target.appendChild(bubble); 
    }, 

    mouseleave : function() { 
     $("#bubble").empty();   
    } 
}); 

这样做是追加泡沫元件在其上鼠标在元件。通过将display: inline应用于div，您可以使其显示在其兄弟的旁边而不是其下方，因为如果直接使用此代码，它会执行此操作。

Answer 7

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

     var p = $(this).position(); 
     $("#bubble").css({left: p.left + $(this).outerWidth(), top: p.top }); 
    }, 
    mouseleave: function() { 
     $("#bubble").empty().css({top: '', left: ''}); 
    } 
});​ 

Answer 8

为什么当#bubble元素已经存在使用.on()。

$(".bubble").hover(function() { 

    var offset = $(this).offset(); 

    $("#bubble").html($(this).attr("id")) 
     .css({ top: offset.top, left: offset.left + $(this).width() }) 
     .show(); 
}, function() { 
    $("#bubble").html("").hide(); 
}); 

小提琴here