JQuery mouse events with stacked elements

Question

I have a web page with a table. Using jQuery 1.3.2, I absolutely position a div element over the top of each row on the table. The overlaying div has a higher z-index.

I attach 'mouseenter' and 'mouseleave' events to the overlaying div element. On mouseenter, I throw a red border around the overlaying div. On mouseleave, I remove the border. So the effect is to have each table row highlighted as the mouse moves over the table.

Everything works fine until the mouse enters some text in the table. Then the border turns off. So what seems to be happening is:

Enter overlaying div - mouseenter called
Enter table text (still within overlaying div) - mouseleave called on overlaying div.

I eventually want to capture the click event anywhere within the overlaying div to do something else, so I can't use CSS to handle this.

Here's the code:

    $('.overlay').bind("mouseenter", function() {
            $(this).css('border','solid 1px red');
        }
    )
    $('.overlay').bind("mouseleave", function() {
            $(this).css('border','none');
        }
    )

I'd appreciate any help on either getting the overlaying div to capture the mouse or getting the table to ignore it.

Do you have any floated elements contained within your DIV? If so, it could very well be that you need to apply overflow: hidden to your DIV element as a hack to clear the floats. — Corey Ballou
No floats. Just an empty div covering the table row with the idea of making table rows mouse sensitive. — Jon

Mercurybullet Mercurybullet · Accepted Answer · 2009-10-20T00:07:51

From what I understand, mouseenter and mouseleave do not bubble down to child elements. (src: Mouseenter and mouseleave events for Firefox).

Try mouseover and mouseout instead and it should work as expected.

Edit: By bubble down to child elements, I mean bubble up from child elements.

JQuery mouse events with stacked elements

2 Answers