How to make animation trigger in mouseenter in AFrame?

For a gaze-based cursor at the center of the screen, what you have is almost right.

The entry in objects: needs to match a selector, so .sign for the class or #sign for the id.

However, the entity with class "sign" does not have any geometry, so the raycaster will never hit it. One solution is to give the children the same class of "sign" - then the raycaster will hit them, and the event will bubble up to the parent entity where it can trigger the animation.

Full code:

        <a-entity class="sign" id="sign" position="2.5 1 -3.5"
              animation__mouseenter="property:rotation; to:0 -390 0; easing:linear; dur:2000; startEvents: mouseenter"
              rotation="0 -30 0" text="width: 4; align: center; color: black; value: Make the sign board rotate 360">                  
        <a-box class="sign" color="#FFFF00" position="0 0 -0.05" scale="1.8 0.6 0.1"> </a-box>
        <a-box class="sign" color="#FFFF00" position="0 -0.7 -0.05" scale="0.1 1 0.1"> </a-box>
    </a-entity>

    <a-camera position="0 0.2 1.3">                
      <a-cursor "objects: .sign">
      </a-cursor>
    </a-camera>

Another solution would be to give the parent entity a geometry (e.g. an invisible plane) that the raycaster can hit

Working glitch showing the 1st solution here:

https://glitch.com/edit/#!/raycast-sign-animation?path=index.html%3A24%3A7

One thing I noticed is that the animation you specified will only run once. If you refresh the page it will run again, but only once.

The reason for this is that after the animation has run the first time, the entity is rotated to the target "to" rotation of "0 -390 0".

If you want the animation to run multiple times, add a "from" rotation of "0 -30 0" and it should refresh each time. I have updated the glitch to show that too.