Change the color of ellipse when mouse over

Question

I'm totally new in WPF. It's kind of confusing, why the first code snippet works fine (when mouse over, the color changes) but the second one doesn't work?

<Ellipse Height="50" Width="50" Opacity="0.5" Stroke="Black" >
<Ellipse.Style>
    <Style TargetType="{x:Type Ellipse}">
        <Setter Property="Fill" Value="Blue" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Fill" Value="Green">
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</Ellipse.Style>

//

<Ellipse Height="50" Width="50" Fill="Blue" Opacity="0.5" Stroke="Black" >
<Ellipse.Style>
    <Style TargetType="{x:Type Ellipse}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Fill" Value="Green">
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</Ellipse.Style>

thanks.

Answer 1

This purely because of the Property value precedence. The below link got an excellent explanation.

WPF Trigger won't set property if set in Element