Căn chỉnh div bên cạnh các mục danh sách

Question

Tôi đang cố gắng tạo các thành phần div và in các mục đó theo cách động. Tôi đã tạo a demo để hiển thị nơi tôi đã tiếp cận.

Vấn đề với mã của tôi là mã không hiển thị ngay bên cạnh danh sách nơi tôi muốn. Thay vào đó nó được hiển thị ở phía dưới. Có thể hiển thị div mới ngay cạnh phần tử mà tôi đang di chuột qua không?

$(".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

Bạn cần phải thiết lập vị trí của #bubble tương đối so với li đang được chuột di qua . Hãy thử điều này:

$("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

Lưu ý rằng tôi đã xoá việc sử dụng live() vì nó đã bị phản đối, và sử dụng on() với một đại biểu để thay thế. Ngoài ra tôi đã sử dụng sự kiện hover.

Answer 2

Nếu bạn cung cấp cho các <ul> và <div> phong cách sau đây cần làm việc.

display: inline; 
float: left; 

Answer 3

Hope this helps:

JS-Fiddle Demo

tôi gắn #bubble đến li

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

      } 
    }); 

Answer 4

Hãy làm những gì Mica nói và cũng loại bỏ vị trí: tuyệt đối;

Vì vậy, css nên

#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

gì về một giải pháp CSS tinh khiết?

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

Hãy thử điều này:

var bubble = $("#bubble"); 

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

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

Điều này không là gắn thêm các yếu tố bong bóng để các yếu tố trên mà chuột kết thúc. Bằng cách áp dụng display: inline vào div, bạn có thể làm cho nó xuất hiện bên cạnh anh chị em của nó thay vì dưới nó như nó sẽ làm gì nếu bạn sử dụng mã này trực tiếp.

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

Lý do sử dụng .on() khi phần tử #bubble đã tồn tại.

$(".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(); 
}); 

Fiddle here