有没有办法将鼠标悬停在jquery中另一个元素z索引下方的元素上？

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 内，因此它们会在两个元素上悬停。

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