Question

I an trying to create an overlay for table rows. I want the overlay to show after the user’s mouse has been on the row for a second or so, and remove it once the mouse has left the row.
I started working on this: http://jsfiddle.net/YCZ3J/

I am stuck on several things:

1. The mouseenter event keeps firing when moving the mouse inside the row. I can’t figure out why.
2. I want the overlay to cover the row, except for the image TD, and haven’t had much success with that either.
3. I want each row to have different text / buttons on the overlay. I tried adding a div to each TR and using .parent().('.overlay'), but couldn’t get that to work.

Any help will be greatly appreciated.
Thank you!

Edit: After some pointers, here is a working Fiddle with all my requirements met: http://jsfiddle.net/YCZ3J/37/

Edit 2: I ended up going with the hoverIntent jquery plugin, since it solves the glitch issues.

Answer 1

I can help you for the first question: you should use mouseover instead of mouseenter see this link for more informations, basically mouseover triggers only for current div when mouseenter triggers for current div and all parents, so moving the mouse keeps firing the parent div’s mouseenter.

Edit : oh! and keep mouseleave to trigger the overlay.hide

You should bind the overlay.hide to overlay.mouseleave.(i.e. when mouse leaves the overlay, not the row since the overlay is in front of it)

Edit : here is the update, http://jsfiddle.net/YCZ3J/32/ see I put right:’0px’, width:’66,7%’ in the Overlay.css so it would leave the image free.

As you’ll see there is a glitch when you mouseleave the overlay to the other one for the overlay moves, completes the slideup transition and then slides down again after one sec.