javascript - seleccionar - selectores jquery avanzados

Alineando div justo al lado de los elementos de la lista

Question

Estoy intentando crear elementos div e imprimir elementos dinámicamente en ellos. He creado una demo para mostrar dónde he llegado.

El problema con mi código es que no aparece justo al lado de la lista donde lo quiero. En su lugar, se muestra en la parte inferior. ¿Es posible mostrar el nuevo div justo al lado del elemento sobre el que estoy pasando?

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

¿Qué pasa con una solución CSS pura?

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 2

Espero que esto ayude:

JS-Fiddle Demo

Le agrego el #bubble a la li

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

            }
  });

Answer 3

Haz lo que dijo Mica y también elimina la posición: absoluta;

Así que css debería ser

#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 4

Por qué usar .on() cuando el elemento #bubble ya existe.

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

Violín here

Answer 5

Prueba esto:

var bubble = $("#bubble");

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

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

Lo que esto hace es añadir el elemento de burbuja al elemento sobre el que se encuentra el mouse. Al aplicar display: inline con el div , puede hacer que aparezca al lado de su hermano en lugar de debajo de él, como lo hará si usa este código directamente.

Answer 6

Si le da a <ul> y <div> los siguientes estilos, debería funcionar.

display: inline;
float: left;

Answer 7

#bubble establecer la posición de #bubble relación con el li que se está superponiendo. Prueba esto:

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

Ejemplo de violín

Tenga en cuenta que he eliminado el uso de live() ya que ha quedado en desuso y, on() su lugar, lo he usado on() con un delegado. También utilicé el evento hover .

Answer 8

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