将div与列表项右对齐

Question

我试图动态创建 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>

- user1371896

Answer 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事件。

- Rory McCrossan

---

但如果 div 是动态创建的，则 on 仅适用于第一次... - user1371896

@user1371896 不是真的，我正在使用带有委托处理程序的 on()，因此它将像 live() 一样运行，但性能更好。 - Rory McCrossan

一定会检查并让您知道。 - user1371896

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/

- mkey

---

在所有提供的解决方案中，我绝对更喜欢这个，而且它甚至可以在IE7中运行！不错！ - SaschaM78

@SaschaM78 谢谢您，亲切的先生。通常我更喜欢能够破坏IE7的解决方案:P 但在这种情况下，我会做出一个例外。 - mkey

OP的问题陈述为：我试图创建div元素并将项目打印（print）到它们上面。你的纯CSS解决方案的问题在于你无法将项打印到突出显示的div中。不过，你的工作令人印象深刻！ - Sayan

Answer 3

希望这能帮到您：

JS-Fiddle演示

我将#bubble添加到li中。

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

            }
  });

- Akhil Sekharan

---

+1 尽管 display:inline-block 在 IE7 中存在问题，需要一些不太正常的技巧来解决。 - David Barker

Answer 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，您可以使其出现在其兄弟元素旁边，而不是像直接使用此代码时一样出现在其下方。

- Levi Botelho

Answer 5

按照 Mica 的建议并且移除 position: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/

- Sahil

Answer 6

为什么在#bubble元素已经存在时要使用.on()？

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

- Bruno

---

然后只需使用 left: offset.left - $("#bubble").width() 来设置左侧 CSS 属性。点此查看演示 链接。 - Bruno

Answer 7

如果您给<ul>和<div>添加以下样式，它应该可以工作。

display: inline;
float: left;

- micha

---

也许我没有正确理解你的问题，但是以下CSS规则对我有效：ul，div {float：left; display：inline}。 - micha

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

- Philipp Hofmann

---

使用了不少于10个jQuery对象，其中7个使用相同的选择器...天呐！ - David Barker

谢谢您的评论。我从未想过那一点，这将会改善我的风格！ - Philipp Hofmann

没问题，jQuery 的真正美妙之处在于其链式操作的能力，因此 $('#bubble').empty().css({"top" : '', "left" : ''}); 可以只使用一个 jQuery 对象来完成相同的操作 :) - David Barker