A-Frame Course - Source of /examples/1100-interactions-05-events-showhide.html

<!DOCTYPE html>
<html>
  <head>
    <title>Interactions - 05 - Show/Hide</title>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component/dist/aframe-event-set-component.min.js"></script>
  </head>
  <body>
    <a-scene cursor="rayOrigin: mouse">
      <a-entity environment="preset: goldmine; dressingAmount: 20"></a-entity>

      <a-box
        position="-1 1.6 -2"
        width="0.5"
        height="0.5"
        depth="0.5"
        color="green"
        event-set__mouseenter="visible: false"
        event-set__mouseleave="visible: true"
      ></a-box>

      <a-box
        position="0 1.6 -2"
        width="0.5"
        height="0.5"
        depth="0.5"
        color="red"
        event-set__mouseenter="opacity: 0.3"
        event-set__mouseleave="opacity: 1"
      ></a-box>

      <a-box
        position="1 1.6 -2"
        width="0.5"
        height="0.5"
        depth="0.5"
        color="blue"
        event-set__click="_target:#topbox; visible: true"
      ></a-box>

      <a-box
        id="topbox"
        position="1 2.6 -2"
        width="0.5"
        height="0.5"
        depth="0.5"
        color="lightblue"
        visible="false"
      ></a-box>

      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>
    </a-scene>
  </body>
</html>