Is there a way to hover over an element that is below another elements z-index in jquery?

Question

I have a map split into three parts, the map background, the map labels and the map piece itself the order is as follows:

map background: z-index = 1
map label: z-index = 3
map piece (hover): z-index = 2 (to go under the label)

Is there a way to hover over the piece which is z-index = 2 if there is an element on top of that using jquery? (ie the label)

Answer 1

You can either trigger the hover on the label as well, or create invisible divs on top of everything:

$(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

EDIT: Okay, this seems to work. not sure if there are any drawbacks.

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

Basically put both the label and the piece inside of a div. Put the hover on the div. Since the container div has no contents other than the absolutely positioned elements, it won't show. But since both elements are within that div, they hover fires on both.

EDIT 2: Updated fiddle. As you can see in the updated fiddle, since they really have the same handler, if they overlap, moving from one to the other will not fire the hover again.