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

Question

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

地图背景：z-index = 1

地图标签：z-index = 3

地图块(悬停)：z-index = 2 (转到标签下)

有没有办法悬停在z-index = 2上，如果上面有一个使用jquery的元素？(即标签)

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:更新小提琴。正如你在更新的小提琴中看到的，因为它们确实有相同的处理程序，如果它们重叠，从一个移动到另一个将不会再次触发悬停。