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:

1. Enter overlaying div - mouseenter called
2. 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.

Answer 1

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.

Answer 2

Seems to be an IE problem. Anyway, changing the div to a transparent img solved it.