mouseout and checkboxes

[Proper]

I have the following problem:

I have a button with an onmouseover event. This event fires as
expected and displays another div element when the mouse hovers over
the button.

The div element which is then displayed uses an onmouseout event that
sets its style to display:none when the mouse cursor goes out of the
element. This is also working fine as expected.

However, the displayed div element has a few checkboxes inside. And as
soon as the cursor reaches one of these checkboxes the mouseout event
is fired. The result is: the checkboxes are never clickable in this
case.

The example could be seen here:

http://xxamples.googlepages.com/exa.html

Can somebody

1. explain the reason, why the mouseout event fires when the mouse is
inside of one of the checkboxes (It seems that the cursor is no more
inside of the div element).

2. give me a hint or a solution how to avoid that, so that the
checkboxes are clickable. (But without removing the mouseout event
completely, so that the event is only fired when the cursor moves out
of the element.)

 

[Martin Honnen]

However, the displayed div element has a few checkboxes inside. And as
soon as the cursor reaches one of these checkboxes the mouseout event
is fired. The result is: the checkboxes are never clickable in this
case.

See http://www.faqts.com/knowledge_base/view.phtml/aid/1606/fid/145