Wyrównanie elementu div obok elementów listy

Question

Próbuję tworzyć elementy i drukować elementy na nich dynamicznie. Stworzyłem a demo, aby pokazać, gdzie osiągnąłem.

Problem z moim kodem polega na tym, że nie pojawia się tuż obok listy, gdzie chcę. Zamiast tego jest wyświetlany na dole. Czy jest możliwe pokazanie nowego div tuż obok elementu, nad którym się unosimy?

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

Musisz ustawić pozycję #bubble względem li który jest moused ponad . Spróbuj tego:

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

Zauważ, że usunąłem użycie live() gdyż została zaniechana i wykorzystywane on() z delegatem zamiast. Użyłem także zdarzenia hover.

Answer 2

Jeśli dasz <ul> i <div> następujące style powinno działać.

display: inline; 
float: left; 

Answer 3

Nadzieja to pomaga:

JS-Fiddle Demo

mogę dołączyć #bubble do li

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

      } 
    }); 

Answer 4

robić to, co powiedział Mika, a także usunięcia position: absolute;

Więc css powinny być

#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

Co czystego roztworu 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

Spróbuj tego:

var bubble = $("#bubble"); 

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

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

Co to robi to dołącza element bubble do elementu, w którym jest kursor. Poprzez zastosowanie display: inline do div możesz sprawić, by pojawił się obok swojego rodzeństwa zamiast pod nim, tak jak to zrobi, jeśli użyjesz tego kodu bezpośrednio.

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

Dlaczego używać .on() gdy już istnieje element #bubble.

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