Onmouseout in <td> triggers when child elements inside it are accessed

Question

<td align="left" valign="top" onmouseout="btnMenuCollapseClicked()">
                          <asp:Panel ID="Panel2" runat="server" ScrollBars="Auto">

                 <asp:TreeView ID="TreeView2" runat="server" Width="169px" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged">
                     <Nodes>
                         <asp:TreeNode Text="Main1" Value="Main1">
                             <asp:TreeNode Text="B" Value="B"></asp:TreeNode>
                             <asp:TreeNode Text="C" Value="C"></asp:TreeNode>
                             <asp:TreeNode Text="D" Value="D"></asp:TreeNode>
                         </asp:TreeNode>
                         <asp:TreeNode Text="Main2" Value="Main2">
                             <asp:TreeNode Text="A" Value="A"></asp:TreeNode>
                             <asp:TreeNode Text="B" Value="B"></asp:TreeNode>
                         </asp:TreeNode>
                     </Nodes>
                 </asp:TreeView>

             </asp:Panel>

                 </td>

In the above td i have mentioned a onmouseout event But When i mouse over the treeview present inside the td , the onmouseout event of the td gets triggered . How to avoid this . ?

Answer 1

That is how onmouseout works.

You want to use onmouseleave