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

我将地图分为三部分，地图背景、地图标签和地图块本身。顺序如下：

地图背景：

z-index=1

地图标签：

z-index=3

地图块（悬停）：

z-index=2

（进入标签下）

---

如果使用jquery在其上方有一个元素，是否有方法将鼠标悬停在

z-index=2

的工件上？（即标签）

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

基本上，将标签和片段都放在div中。将鼠标悬停在div上。因为container div除了绝对定位的元素之外没有其他内容，所以它不会显示。但由于这两个元素都在该div中，所以它们都将火悬停在这两个div上

---

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

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

基本上，将标签和片段都放在div中。将鼠标悬停在div上。因为container div除了绝对定位的元素之外没有其他内容，所以它不会显示。但由于这两个元素都在该div中，所以它们都将火悬停在这两个div上

---

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

您也可以在标签上触发悬停，或者在所有内容上创建不可见的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
    });
});

---

也可以触发标签上的悬停，或在所有内容上创建不可见的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
    });
});