Overriding ControlTemplate - VisualState MouseOver is only performed on MouseClick

Question

I have overridden the default Template of a scrollbar. It is simply a Rectangle and a Arrow Picture. I have 2 Pictures one for the Normal State and one for MouseOver.

In my VisualStates I change the image visibility on MouseOver.

When i now go with the Mouse over the Scrollbar it is doing nothing, but when I click the Image it is changing from the NormalPicture to HoverPicture.

What am I doing wrong?

ScrollBarStyle:

<Style x:Key="ScrollBarStyle" TargetType="ScrollBar">
   <Setter Property="IsTabStop" Value="False"/>
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="ScrollBar">
             <Grid x:Name="Root">
                 <VisualStateManager.VisualStateGroups>
                     <VisualStateGroup x:Name="CommonStates">
                         <VisualState x:Name="Normal"/>
                         <VisualState x:Name="MouseOver">
                             <Storyboard>
                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NormalState">
                                     <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                           <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                     </DiscreteObjectKeyFrame>
                                 </ObjectAnimationUsingKeyFrames>
                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="HoverState">
                                     <DiscreteObjectKeyFrame KeyTime="0">
                                         <DiscreteObjectKeyFrame.Value>
                                             <Visibility>Visible</Visibility>
                                         </DiscreteObjectKeyFrame.Value>
                                     </DiscreteObjectKeyFrame>
                                  </ObjectAnimationUsingKeyFrames>
                             </Storyboard>
                         </VisualState>
                         <VisualState x:Name="Disabled">
                             <Storyboard>
                                 <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
                             </Storyboard>
                         </VisualState>
                     </VisualStateGroup>
                  </VisualStateManager.VisualStateGroups>
                  <Grid x:Name="VerticalRoot">
                      <Grid.ColumnDefinitions>
                          <ColumnDefinition/>
                      </Grid.ColumnDefinitions>
                      <Rectangle Stroke="#00000000" StrokeThickness="1" Fill="Black" />
                      <Image x:Name="NormalState" Source="/SlDragDropTest;component/Images/ArrowUpNormal.png"></Image>
                      <Image x:Name="HoverState" Source="/SlDragDropTest;component/Images/ArrowUpHover.png" Visibility="Collapsed"></Image>
                  </Grid>
               </Grid>
         </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>