Выравнивание div рядом с элементами списка

Я пытаюсь создать элементы div и печатать элементы на них динамически. Я создал демонстрацию, чтобы показать, где я достиг.

Проблема с моим кодом заключается в том, что он не отображается рядом со списком, где я его хочу. Вместо этого он отображается внизу. Можно ли показать новый 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>

Ответ 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();
    }
});

Пример скрипта

Обратите внимание, что я удалил использование live(), поскольку он устарел, и вместо этого использовал on() с делегатом. Также я использовал событие hover.

Ответ 2

Как насчет чистого 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/

Ответ 3

Надеюсь, что это поможет:

JS-Fiddle Demo

Я добавляю #bubble в li

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

            }
  });

Ответ 4

Попробуйте следующее:

var bubble = $("#bubble");

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

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

То, что это делает, добавляет элемент пузырька в элемент, над которым находится мышь. Применяя display: inline к div, вы можете сделать его рядом со своим родным братом, а не под ним, как это будет сделано, если вы используете этот код напрямую.

Ответ 5

Сделайте то, что сказала слюда, а также удалите позицию: absolute;

Итак, 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/

Ответ 6

Зачем использовать .on(), когда элемент #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 здесь

Ответ 7

Если вы дадите <ul> и <div> следующие стили, они должны работать.

display: inline;
float: left;

Ответ 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: ''});
    }
});