Question

我正在尝试创建div元素并动态打印项目。我创建了a demo以显示我到达的位置。

我的代码的问题是它没有显示在我想要的列表旁边。相反，它显示在底部。是否可以在我悬停的元素旁边显示新的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>

Answer 1

您需要设置相对于被暂停的#bubble的{{1}}的位置。试试这个：

li

Example fiddle

请注意，我已删除了$("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()事件。

Answer 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/

Answer 3

希望这会有所帮助：

<强> JS-Fiddle Demo

我将#bubble附加到li

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

            }
  });

Answer 4

试试这个：

var bubble = $("#bubble");

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

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

这样做是将bubble元素追加到鼠标悬停的元素上。通过将display: inline应用于div，您可以将其显示在其兄弟旁边而不是它下面，如果您直接使用此代码，它将会显示。

Answer 5

做Mica所说的并删除位置：绝对;

所以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/

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

小提琴here

Answer 7

如果您为<ul>和<div>提供以下样式，则应该有效。

display: inline;
float: left;

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: ''});
    }
});

将div对齐到列表项旁边

8 个答案: