Allineamento div a destra accanto agli elementi dell'elenco

Question

Sto cercando di creare elementi div e di stamparli dinamicamente. Ho creato a demo per mostrare dove ho raggiunto.

Il problema con il mio codice è che non viene visualizzato accanto all'elenco dove lo desidero. Invece è visualizzato nella parte inferiore. È possibile mostrare il nuovo div proprio accanto all'elemento che sto passando sopra?

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

È necessario impostare la posizione di #bubble rispetto al li che viene moused over . Prova questo:

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

Si noti che ho rimosso l'uso di live() come è stato deprecato, e utilizzato on() con un delegato, invece. Inoltre ho usato l'evento hover.

Answer 2

Se si dà la <ul> e la <div> i seguenti stili dovrebbe funzionare.

display: inline; 
float: left; 

Answer 3

Spero che questo aiuti:

JS-Fiddle Demo

aggiungo il #bubble alla li

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

      } 
    }); 

Answer 4

fare quello che ha detto Mica e rimuovere anche il position: absolute;

Quindi css dovrebbe essere

#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

Che dire di una soluzione CSS puro?

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

Prova questo:

var bubble = $("#bubble"); 

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

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

Quello che fa è aggiunge l'elemento di bolla per l'elemento su cui il mouse è sopra. Applicando display: inline allo div è possibile farlo comparire accanto al fratello anziché al di sotto di esso come farà se si utilizza direttamente questo codice.

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

Perché utilizzare .on() quando l'elemento #bubble esiste già.

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