1

マウスが div .test の上にあるときは、div .box を .test の上にスライドさせたいと思います。

正常に動作していますが、.test の左上でマウスを動かしていると動作しないようです。理由はわかりません...

私のcssは：

.box{
    z-index:2;
    position: absolute;
}

そして私のjQuery：

box = function(el) {
    $('body').append('<div class="box"></div>');
    var box = $('.box:last');
    var posTop = el.offset().top;
    var posLeft = el.offset().left;
    box.hide().css({
        'left': posLeft,
        'top': posTop
 }).html('azerty<br>azerty<br>azerty<br>azerty<br>azerty<br>azerty<br>azerty').slideToggle(150);
}

boxStop = function() {
    var box = $('.box:last');
    box.stop().slideToggle(150, function() {box.remove();});
}

$(document).on('mouseover', '.test', function() {
    box($(this));
}).on('mouseout', function() {
    boxStop();
});

ここでフィドル：http://jsfiddle.net/malamine_kebe/sKNcs/3/

4

2 に答える 2

1

の z-index.boxを -1 に変更してみてください。これにより、マウスオーバーが覆わ.testれてブロックされなくなります。

.box{
    position: absolute;
    z-index: -1;
}

これがJSFiddleです。

編集: 負の z-index は要素を他のすべての要素の後ろに配置するため (これは望ましくない場合があります)、配置.testして、より高い z-index を持つようにすることもできます.box。

.box{
    position: absolute;
}

.test {
    z-index: 1;
    position: absolute; /*could be relative or fixed too*/
}

そしてJSFiddle。

于 2013-08-09T21:36:57.367 に答える
0

ボックスが表示され、マウスが div.test ではなく div.box に移動します。

「pointer-events:none;」を追加できます。あなたのCSSに：

.box{
  z-index:2;
  position: absolute;
  pointer-events:none;
}

ただし、これは新しいブラウザでのみ機能します。

于 2013-08-09T21:35:19.400 に答える