鼠标悬停在非球体上时显示文本答案

【问题标题】：Show text on mouse over of a-sphere鼠标悬停在非球体上时显示文本
【发布时间】：2017-07-26 01:54:15
【问题描述】：

这是我正在为 360 图片库调整的代码：

https://glitch.com/edit/#!/wild-aftershave

这是一个 MCV 版本：https://glitch.com/edit/#!/good-soup

我有一个链接模板：

<script id="link" type="text/html">
          <a-entity class="link"
            hover-text="value: I am hovered."
            rotation="-45 0 0"
            position="-4 0 0"
            geometry="primitive: sphere; radius: .5"
            material="shader: flat; src: ${thumb};"
            event-set__1="_event: mousedown; scale: 1 1 1"
            event-set__2="_event: mouseup; scale: 1.2 1.2 1"
            event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
            event-set__4="_event: mouseleave; scale: 1 1 1"
            set-image="on: click; target: #image-360; src: ${src}"
            sound="on: click; src: #click-sound"
          ></a-entity>


        </script>

个别图片链接：

 <a-entity id="links" layout="type: circle; radius: 4; angle: ;" position="2 -2 .1">

        <a-entity template="src: #link" data-src="#coney" data-thumb="#coney-thumb"> 

        <!-- animation to show once a link has been clicked-->
        <a-animation attribute="rotation"
               dur="5000"
               begin="click"
               from=""
               to="0 0 20"
               repeat="0"></a-animation>

        </a-entity>

x20...

还有一个光标/相机。

目前，当您更改图像时，会播放动画以显示您已看到该图像（此外：无法使不透明度起作用，因为它是另一个实体内部的实体内部的动画）。我想知道当您凝视图片链接时，如何将文本悬停在图片链接上。

我在这里尝试了悬停文本脚本：

(A-sphere show text on mouse over or attach a text to a-sphere),

但除非我没有将悬停文本组件放在正确的位置，否则我无法让它工作。有什么建议么？谢谢。

【问题讨论】：

首先，我链接了代码。其次，我现在在帖子中编辑了重要的部分。所以收回反对票。

标签： javascript aframe

【解决方案1】：

使用value，而不是content。

el.setAttribute('text', {content: data.content});

您也可以使用event-set__text="_event: mouseenter; text.value: 'Hello'" 或event-set__text="_event: mouseenter; _target: #someText; text.value: "Hello"。

【讨论】：

谢谢凯文！我尝试将悬停文本脚本更改为值而不是内容，并将悬停文本放在单个链接中，但这不起作用。然后我删除脚本并尝试了事件集并将其放入链接模板中？也没有工作，但这可能是因为我不知道事件集的东西是如何工作的。
glitch.com/edit/#!/join/8dca8c1c-f1d0-4102-ba1e-20df2a5fefb4 这是我希望开始工作的迷你版本......如果你能看看我是否把你的代码写对了
#someText 通过您需要创建的包含文本的 ID 指向实体。
我为图片链接实体添加了 someText id。仍然没有文字显示。

【解决方案2】：

真的无法让它发挥作用，但这是有效的：

添加这个以实体为目标并切换其不透明度的脚本：

<script>
      document.querySelector('a-scene').addEventListener('enter-vr', function () {
        var link = document.querySelector('.bottom-left').style.visibility = "hidden";
      });
      document.querySelector('.target').addEventListener('mouseenter', function () {
        var toggle = document.querySelector('.toggle').setAttribute('opacity', 100);
        var text = document.querySelector('.text').setAttribute('opacity', 100);
      });
      document.querySelector('.target').addEventListener('mouseleave', function () {
        setTimeout(function () {
          var toggle = document.querySelector('.toggle').setAttribute('opacity', 0);
          var text = document.querySelector('.text').setAttribute('opacity', 0);
        }, 100);
      });

然后制作一个平面，您希望在其中显示文本并在其中显示文本：

  <a-plane class="toggle" color="#2582EF" height="1.25" width="2.5" scale="0.8 0.8 0.8" rotation="0 -90 0" 
               position="3 -5 .3" opacity="0" visible="true" material="color:#2582EF;opacity:0" geometry="primitive:plane;height:1.25;width:2.5">
        <a-text class="text" text="anchor:align;width:4.5;color:#FFFFFF;align:center;opacity:0;font:https://cdn.aframe.io/fonts/Exo2SemiBold.fnt;
                                   value:Hey" 
                letterspacing="1.3" width="4.5" color="#FFFFFF" align="center" opacity="0" scale="0.5 0.5 0.5" 
                position="0 0 0" rotation="0 0 0" visible="true">
        </a-text>
      </a-plane>

然后在你想要作为切换目标的实体中添加

class="target"

和中提琴...不过，只需要为每件事制作一个新的平面、脚本和目标。它不干净，但它适用于没有 JavaScript 经验的人。

【讨论】：