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

フィドルの例

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-フィドルデモ

liに#bubbleを追加します

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

マイカが言ったことを実行し、位置を削除します：絶対;

したがって、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 に答える
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 に答える
1

と次のスタイルを指定する<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 に答える