jQuery，slideToggle问题

Question

当我的鼠标在div上时。我想要一个div .box来上面。使用slideToggle测试。当鼠标离开时。我希望.box再次滑动切换。

它工作得很好但是当我在.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/

Answer 1

尝试将.box的z-index更改为-1，因此它不会覆盖.test并阻止鼠标悬停。

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

这是JSFiddle。

编辑：由于负z-index会使元素落后于所有其他元素（您可能不需要），您也可以定位.test并确保它具有比{更高的z-index} {1}}。

.box

JSFiddle。

Answer 2

框出现，然后鼠标不再在你的div.test之上，而是在div.box上。

您可以添加“pointer-events：none;”你的css：

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

但这只适用于新浏览器。