1

当我的鼠标悬停在 div .test 上时，我希望 div .box 使用 slideToggle 在 .test 上方，而当鼠标离开 .test 时，我希望 .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/

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 上。

您可以添加“指针事件：无；” 到你的CSS：

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

但这仅适用于新浏览器。

于 2013-08-09T21:35:19.400 回答