A-Frame on hover animations (mouseleave, mouseenter)
<p>I have a scene where there are 'mouseenter' objects which trigger actions on other objects:</p>

<pre class="lang-html prettyprint-override"><code>&lt;a-entity class="hover" position="1.3 1.5 0" rotation="0 90 0"&gt;
    &lt;a-entity mixin="hoverbox"&gt;&lt;/a-entity&gt;
    &lt;a-obj-model src="#profile1" scale="0.01 0.01 0.01" material="height: 512; width: 512" mixin="skybox"&gt;
        &lt;a-animation attribute="rotation" dur="10000" easing="linear" fill="forwards" to="0 360 0" repeat="indefinite"&gt;&lt;/a-animation&gt;
        &lt;a-animation attribute="position" dur="300" to="0 0 -.5" begin="hoveron"&gt;&lt;/a-animation&gt;
        &lt;a-animation attribute="position" dur="300" to="0 0 0" begin="hoveroff"&gt;&lt;/a-animation&gt;
    &lt;/a-obj-model&gt;
&lt;/a-entity&gt;
</code></pre>

<p>This is the hoverbox mixin:</p>

<pre class="lang-html prettyprint-override"><code>&lt;a-mixin id="hoverbox" class="hoverbox" material="color:#fff; opacity:.5;" geometry="primitive: sphere; radius: .45;"&gt;&lt;/a-mixin&gt;
</code></pre>

<p>And this javascript attached to it:</p>

<pre class="lang-js prettyprint-override"><code>var sceneEl = document.querySelector('a-scene');
var hoverEls = sceneEl.querySelectorAll('.hover');
for(var i = 0; i &lt; hoverEls.length; i++) {
    var hoverEl = hoverEls[i];
    hoverElBox = hoverEl.querySelector('a-entity');
    hoverElBox.addEventListener('mouseenter', function(evt) {
        // evt.stopPropagation();
        console.log('mouseenter', evt);
        evt.target.nextElementSibling.emit('hoveron');
    }, true);
    hoverElBox.addEventListener('mouseleave', function(evt) {
        // evt.stopPropagation();
        console.log('mouseleave', evt.target.parentNode);
        evt.target.nextElementSibling.emit('hoveroff');
    }, true);
}
</code></pre>

<p>This triggers the repositioning of the element when a user hovers the 'hoverbox' sphere. It also triggers the returning to its normal position when the cursor leaves the hoverbox.</p>

<p>The cursor element looks this:</p>

<pre><code>&lt;a-entity cursor="fuse:true, fuseTimeout: 50;" raycaster="far: 10; objects: .hoverbox" /&gt;
</code></pre>

<p>So it doesn't emit an event on other objects.</p>

<p>However, the behavior is kinda buggy. Sometimes when the cursor moves away from the sphere the 'hoveroff' event isn't triggered and other times the sphere just doesn't register the mouseenter.</p>

<p>Anyone know how to make this work?</p>

<p>Look here for the full code: <a href="http://vr.dco.rocks/" rel="nofollow">http://vr.dco.rocks/</a></p>