title: A-Frame cursor with visual feedback
body: <p>The <a href="https://aframe.io/docs/0.4.0/components/cursor.html#adding-visual-feedback" rel="nofollow noreferrer">docs</a> reference this <a href="http://codepen.io/anon/pen/dpmpJP" rel="nofollow noreferrer">Codepen</a>. However this code does not seem to work with the latest version of A-Frame v0.4.0.</p>
  
  <p>What is the best practice to implement this same visual feedback in v0.4.0.</p>
  
  <p>In particular I'd like to change the properties of my target entity on hover over, hover out.</p>
  
  <p>This is the code that is in the Codepen:</p>
  
  <pre><code>&lt;a-scene&gt;
    &lt;a-assets&gt;
      &lt;a-mixin id="cube" geometry="primitive: box"&gt;&lt;/a-mixin&gt;
      &lt;a-mixin id="cube-hovered" material="color: magenta"&gt;&lt;/a-mixin&gt;
      &lt;a-mixin id="cube-selected" material="color: cyan"&gt;&lt;/a-mixin&gt;
      &lt;a-mixin id="red" material="color: red"&gt;&lt;/a-mixin&gt;
      &lt;a-mixin id="green" material="color: green"&gt;&lt;/a-mixin&gt;
      &lt;a-mixin id="blue" material="color: blue"&gt;&lt;/a-mixin&gt;
      &lt;a-mixin id="yellow" material="color: yellow"&gt;&lt;/a-mixin&gt;
      &lt;a-mixin id="sphere" geometry="primitive: sphere"&gt;&lt;/a-mixin&gt;
    &lt;/a-assets&gt;
  
    &lt;a-entity position="0 2.2 4"&gt;
      &lt;a-entity camera look-controls wasd-controls&gt;
        &lt;a-entity position="0 0 -3"
                  geometry="primitive: ring; radiusOuter: 0.30;
                            radiusInner: 0.20;"
                  material="color: cyan; shader: flat"
                  cursor="maxDistance: 30; fuse: true"&gt;
          &lt;a-animation begin="click" easing="ease-in" attribute="scale"
               fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"&gt;&lt;/a-animation&gt;
          &lt;a-animation begin="fusing" easing="ease-in" attribute="scale"
               fill="forwards" from="1 1 1" to="0.1 0.1 0.1" dur="1500"&gt;&lt;/a-animation&gt;
        &lt;/a-entity&gt;
      &lt;/a-entity&gt;
    &lt;/a-entity&gt;
  
    &lt;a-entity position="-3.5 1 0"&gt;
      &lt;a-entity mixin="cube red"&gt;
        &lt;a-animation begin="click" attribute="position" from="0 0 0"
                     to="0 0 -10" dur="2000" fill="both"&gt;&lt;/a-animation&gt;
      &lt;/a-entity&gt;
    &lt;/a-entity&gt;
  
    &lt;a-entity position="0 1 0"&gt;
      &lt;a-entity mixin="cube green"&gt;
        &lt;a-animation begin="click" attribute="rotation" to="0 360 0"
                     easing="linear" dur="2000" fill="backwards"&gt;&lt;/a-animation&gt;
      &lt;/a-entity&gt;
    &lt;/a-entity&gt;
  
    &lt;a-entity position="3.5 1 0" rotation="0 45 0"&gt;
      &lt;a-entity mixin="cube blue"&gt;
        &lt;a-animation begin="click" fill="forwards" repeat="1"
                     direction="alternate" attribute="position" from="0 0 0"
                     to="15 0 0" dur="2000"&gt;&lt;/a-animation&gt;
      &lt;/a-entity&gt;
    &lt;/a-entity&gt;
  
    &lt;a-entity position="0 3 0" class="clickable" mixin="cube yellow"
              rotation="0 45 0" scale=".5 .5 .5"&gt;&lt;/a-entity&gt;
  &lt;/a-scene&gt;
  </code></pre>
  
  <p>Any help appreciated.</p>