Custom hover-effect for WPF button with strange behaviour -

i have simple button containing image:

    <button x:name="helpbtn" width="25" style="{staticresource hoverbutton}" template="{staticresource hoverbuttontemplate}" click="onhelpbuttonclicked" tooltip="{x:static resx:language.helpbutton}" height="25" borderthickness="0" canvas.top="2" canvas.right="52" canvas.left="-77">        <image x:name="helpimg" source="resources/2_help.png" width="6" height="10" stretch="uniform"/>     </button> 

then have contenttemplate:

    <controltemplate x:key="hoverbuttontemplate" targettype="{x:type button}">         <grid>             <contentpresenter content="{templatebinding button.content}" />             <rectangle x:name="hoverrect2" fill="darkgreen" visibility="hidden" opacity="0.2" width="{templatebinding button.width}" height="{templatebinding button.height}"></rectangle>             <rectangle x:name="hoverrect" fill="black" visibility="hidden" opacity="1" width="{binding relativesource={relativesource templatedparent}, path=content.width}" height="{binding relativesource={relativesource templatedparent}, path=content.height}" margin="{binding relativesource={relativesource templatedparent}, path=content.margin}">                 <rectangle.opacitymask>                     <imagebrush stretch="{binding relativesource={relativesource templatedparent}, path=content.stretch}" imagesource="{binding relativesource={relativesource templatedparent}, path=content.source}"/>                 </rectangle.opacitymask>             </rectangle>         </grid>         <controltemplate.triggers>             <trigger property="ismouseover" value="true">                 <setter targetname="hoverrect" property="visibility" value="visible" />                 <setter targetname="hoverrect2" property="visibility" value="visible" />             </trigger>         </controltemplate.triggers>     </controltemplate> 

the problem is, mouse pointer needs move on image (which showing small questionmark transparent background). mouse pointer needs hover question mark before hover-effect button becomes visible. if hover-effect became active , mouse leaves question-mark still inside button-area, fine. what's reason strange behaviour?

wpf not use rectangle's dimensions detect whether mouse inside (hovering) of control. control must "catch" somehow mouse move events. in case add transparent layer below contentpresenter. once hovering detected visible layers "catched" mouse events.

    <controltemplate x:key="hoverbuttontemplate" targettype="{x:type button}">         <grid>             <rectangle fill="transparent"/>             <contentpresenter content="{templatebinding button.content}" />             <rectangle x:name="hoverrect2" fill="darkgreen" visibility="hidden" opacity="0.2" width="{templatebinding button.width}" height="{templatebinding button.height}"></rectangle>             <rectangle x:name="hoverrect" fill="black" visibility="hidden" opacity="1" width="{binding relativesource={relativesource templatedparent}, path=content.width}" height="{binding relativesource={relativesource templatedparent}, path=content.height}" margin="{binding relativesource={relativesource templatedparent}, path=content.margin}">                 <rectangle.opacitymask>                     <imagebrush stretch="{binding relativesource={relativesource templatedparent}, path=content.stretch}" imagesource="{binding relativesource={relativesource templatedparent}, path=content.source}"/>                 </rectangle.opacitymask>             </rectangle>         </grid>         <controltemplate.triggers>             <trigger property="ismouseover" value="true">                 <setter targetname="hoverrect" property="visibility" value="visible" />                 <setter targetname="hoverrect2" property="visibility" value="visible" />             </trigger>         </controltemplate.triggers>     </controltemplate>