Why does the mouseover event for a button only trigger on the content and not the button itself?

Question

I am wondering why the IsMouseOver event used on a button only triggers once the content has been touched and not when the button has been touched. How to get it to work on the button and not the content?

The blue dot is where the mouse pointer was held.

Button not reacting:

Button reacting when i hold it on the content (grid recolor to simulate touch effect of the standard button):

Button stays lit when i move out of the content so why doesn't this trigger it also?:

Code for style creation:

<!-- Btn layout with generic mouseover event -->
    <Style x:Key="BtnMouseOver" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Grid Name="GridMouseOver" Background="Black" Opacity="0.2" Visibility="Hidden"/>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="GridMouseOver" Property="Visibility" Value="Visible"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Code for usage:

<Button x:Name="btnMenuToggle" Width="60" HorizontalAlignment="Left" Style="{StaticResource BtnMouseOver}" Click="btnMenuToggle_Click">
    <TextBlock Text="Bars" Foreground="White" FontSize="30" FontFamily="{StaticResource FaFreeSolid}"/>
</Button>