Question

我有一个地图分为三个部分，地图背景，地图标签和地图片本身的顺序如下：

地图背景：z-index = 1
地图标签：z-index = 3
地图块（悬停）：z-index = 2（在标签下）

如果在使用jquery的顶部有一个元素，有没有办法将鼠标悬停在z-index = 2的片段上？（即标签）

Answer 1

您也可以在标签上触发悬停，或者在所有内容上创建隐形div：

$(function(){
    $('.mappieces').each(function(){
        var p = $(this).offset();
        var w = $(this).width();
        var h = $(this).height();
        var $invisibleElement = $('div').addClass('invisible-style').css({
            position: "absolute",
            top: p.top,
            left: p.left,
            width: w,
            height: h,
            "z-index": 4 //on top of everything
        }).appendTo('body');
        $invisibleElement.hover(function(){...}, function(){...}); //do stuff
    });
});

Answer 2

编辑：好的，这似乎有效。不确定是否有任何缺点。

http://jsfiddle.net/Sdsax/1/

基本上将标签和部件都放在div中。把悬停放在div上。由于容器div没有绝对定位元素以外的内容，因此不会显示。但由于这两个元素都在该div中，所以它们都会在两个元素上徘徊。

编辑2：更新了小提琴。正如您在更新的小提琴中所看到的那样，因为它们确实具有相同的处理程序，如果它们重叠，则从一个处理器移动到另一个处理程序将不会再次触发悬停。

有没有办法将鼠标悬停在jquery中另一个元素z-index下面的元素上？

2 个答案: