25

我正在尝试创建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>
4

8 回答 8

23

您需要设置#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();
    }
});

示例小提琴

请注意，我已经删除了 of 的使用，live()因为它已被弃用，on()而是与委托一起使用。我也使用了这个hover事件。

于 2012-12-19T12:22:46.240 回答
11

那么纯 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/

于 2012-12-19T12:22:44.667 回答
7

希望这可以帮助：

JS-小提琴演示

我将#bubble 附加到 li

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

            }
  });
于 2012-12-19T12:20:40.960 回答
3

尝试这个：

var bubble = $("#bubble");

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

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

这样做是将气泡元素附加到鼠标所在的元素上。通过应用你可以让它出现在它的兄弟旁边display: inline，div而不是在它下面，就像你直接使用这个代码一样。

于 2012-12-19T12:23:06.690 回答
2

为什么.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();
});

在这里提琴

于 2012-12-19T12:54:44.727 回答
2

照云母说的做，也去掉位置：绝对；

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

于 2012-12-19T12:22:35.053 回答
1

如果您提供 the<ul>和<div>以下样式，它应该可以工作。

display: inline;
float: left;
于 2012-12-19T12:17:53.313 回答
1 
$(".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: ''});
    }
});​
于 2012-12-19T12:26:43.740 回答