文本弹出 OnMouseOvers，不允许 WeaselOvers

如何解决文本弹出 OnMouseOvers，不允许 WeaselOvers

危险：“将它与其他测验和游戏节目区分开来的噱头。因为提示就是答案！”

这个愚蠢的问题似乎没问题，..但是我在这个过程中为自己挖了一个多么糟糕的编码（漏洞）。

我有一个问题，我想创建几组：- -- [div 文本弹出翻转] -- [ 再次出现和消失 ]，但只有当鼠标进入，然后离开

<a href="#" 
onmouseover=show('popup1')
onmouseout=hide('popup1')>Help Text One</a>
<br /><br /><br />
<a href="#" 
onmouseover=show('popup2')
onmouseout=hide('popup2')>Help Text Two</a>

这只黄鼠狼是一种难以追踪的阴险生物，因为所有其他黄鼠狼都太聪明了一半，而且在我的一生中，当其他黄鼠狼奔跑时，我无法看到真正发生的事情：甚至Ron Weaselly 代码在我的 Harried Pottering Code 中的位置。

这个网站在过去帮助了我很多次，我想把 [pop-goes-the-weasel] 回馈给后代。

解决方法

在这里可以找到我的翻车黄鼠狼的答案，它也附有一个骑手：-

“提出和回答你自己的问题也完全没有问题，只要你假装自己在危险中！——以问题的形式表达。”

这是我最终得到的 [ 文本翻转弹出解决方案 ]，这是经过一天半的自言自语并在 codepen.io 上重新编辑，然后再嘟囔一些以获得简单编码的鼬鼠命令弹出。

注意：生成的翻转代码看起来并不那么令人印象深刻，但它确实有效。我现在的问题是它是否可以做得更好，并且变得更简单，而不会让我迷失在三强争霸迷宫中，当然，里面到处都是爆裂的黄鼠狼。

不确定这里是否允许使用 codebase.io 示例，因为到目前为止我看到的所有演示都在（小提琴）中。

所以我为你知识渊博的人创建了一个小提琴帐户，让他们一次过。

** 注意：我还魔术化了一行相当有用的有用文本：实际上被 JS 更改，然后反映 JavaScript 部分中（进行中）的变量状态，（警报）弹出窗口一直阻止代码工作。

狡猾的链接如下：-

https://jsfiddle.net/terrymcb/4gL0ntvs/

这是 HTML 代码，三个盲滚动链接对应三个单独嵌套的 div。

<p>DIV BOX ROLLOVERS</p>
<a href="#" 
onmouseover=javascript:show('gcinfo')
onmouseout=javascript:hide('gcinfo')>TEXT-1</a> JS-1
<br /><br /><br />
<a href="#" 
onmouseover=javascript:show('ucinfo')
onmouseout=javascript:hide('ucinfo')>TEXT-2</a> JS-2
<br /><br /><br />
<a href="#"
onmouseover=javascript:show('uainfo')
onmouseout=javascript:hide('uainfo')>TEXT-3</a> JS-3
<br /><br />
<p id="tValue"> Show in-out OBJ value. </p>

这是布置的 DIVS。

<div id="ucinfo"><!-- which is hidden -->
    <div class="dialog"><!-- is the common style -->
      <p>This is the ucinfo included text.</p>
    </div>
</div>

<div id="uainfo"><!-- which is hidden -->
    <div class="dialog"><!-- is the common style -->
      <p>This is the uainfo included text.</p>
    </div>
</div>
  
<div id="gcinfo"><!-- which is hidden -->
   <div class="dialog"><!-- is the common style -->
     <p>This is gcinfo included text.</p>
  </div>
</div>

CSS，对话框后跟三个外部类：（可见和显示？）也许是过度杀戮。

.dialog {    
    position: fixed;  
    top: 50px;
    right: 50px;
    bottom: 50px;
    left: 150px;
    z-index: 10;
    display: flex;
    padding: 1em;
    background-color: rgba(0,.100);  
    /* opacity: 1; */
    pointer-events: pointer;
    transition: .25s ease-out;
}
#uainfo {
    visibility: hidden;
    display: none;
}
#ucinfo {
    visibility: hidden;
    display: none;
}
#gcinfo {
  visibility: hidden;
    display: none;
}

所有重要的 JavaScript，请注意：我在每次调用时都清除了变量，它似乎可以保持函数正常运行，但在 JS 的这一点上我可能会偏执。我所知道的事实是，在第二次调用 JS 时调用 document.getElementById( direct 总是失败，我不知道为什么！ - 这就是使用变量 disp 和 vist 的原因。

function hide(obj) {  
  disp0 = '0';
  visp0 = '0';
  disp0 = document.getElementById(obj);
  visp0 = document.getElementById(obj);
  disp0.style.display="none";
  visp0.style.visibility="hidden";  
  document.getElementById("tValue").innerText='hide ' + obj;
}
function show(obj) {
  disp1 = '0';
  visp1 = '0';
  disp1 = document.getElementById(obj);
  visp1 = document.getElementById(obj);
  disp1.style.display="block";
  visp1.style.visibility="visible"; 
  document.getElementById("tValue").innerText='show ' + obj;
}

这就是所有人..