Posted by Jonathan N. Little on 05/29/06 17:11

Andrew wrote:
> Hi,
>
> In the following code, if I move my mouse across the row from left to
> right, events are fired in the following order
>
> <table>
> <tr onmouseover="alert('TRover');" onmouseout="alert('TRout');">
> <td onmouseover="alert('TDover');" onmouseout="alert('TDout');">One</td>
> <td onmouseover="alert('TDover');" onmouseout="alert('TDout');">Two</td>
> </tr>
> </table>
>
>
> TDOver (one), TROver, TDOut (one), TROut, TDOver (Two), TROver, TDOut
> (Two), TROut.
>
>
> Why is the TROver and TROut even fired when moving the mouse between TDs
> in the same row, i havent left the tr tag?

Maybe an illustration might help,

in the HEAD of your test page add

<style type="text/css">
TD { background-color: yellow; }
</style>

then look at your table....then add this

<style type="text/css">
TABLE { border-collapse: collapse; }
TD { background-color: yellow; }
</style>

and look again. The space between cells is what I think you are
observing. If the borders are not collapsed as you move from cell 1 to
cell 2 you will pass over a bit of the TR again, so

(C1)TRout > TRover > TRout > (C2)TRover


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Back to original message]