#663 – How IsMouseOver Works for Nested Elements

The IsMouseOver property for a user interface element indicates whether the mouse is currently over the element.

When an element is contained within another element in the logical tree, then IsMouseOver will be true for both the lower-level element and for any elements higher up in the logical tree.

Suppose that we have a Button in a StackPanel which is inside a Window.

<Window Name="win1">
    <StackPanel Name="sp1" Background="Pink" Margin="20,0">
        <Button Name="btn1" Content="Click Me" HorizontalAlignment="Center" Padding="10,5"/>
    </StackPanel>
</Window>

If the mouse is in the application’s Window, but outside of the StackPanel, IsMouseOver will be true only for the Window.

If we move the mouse into the StackPanel, but not over the Button, IsMouseOver will be true for both the StackPanel and the Window.

Finally, moving the mouse over the Button results in IsMouseOver being true for all three elements.