Onmouseover 按钮显示描述框答案

【问题标题】：Onmouseover for a Button to show a description boxOnmouseover 按钮显示描述框
【发布时间】：2016-01-03 11:10:40
【问题描述】：

我希望弹出一个小文本框并一直保持到该按钮不再出现鼠标悬停。

当我将鼠标放在按钮上时，如何让一个带有自定义文本的小框弹出并在我移动鼠标时消失？

非常感谢:)

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些额外的研究，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。
请查看有关 Stack Overflow 的How to ask 问题以及can be asked 的问题类型以及should be avoided. 的问题类型
这个问题是在这里问的stackoverflow.com/questions/3559467/…

标签： javascript html css multimedia

【解决方案1】：

使用javascript..（下次尝试：D）

function in_out(e){
if(e.type=='mouseover'){
	document.getElementById('textbox').style.display='inline';
  }
else if(e.type=='mouseout'){
	document.getElementById('textbox').style.display='none';
	}
}


document.getElementById('button').addEventListener('mouseover',in_out,false)
document.getElementById('button').addEventListener('mouseout',in_out,false)

#textbox {
  width:100px;
  display:none;
}

<input type='text' id='textbox'>
<br>
<button id='button'>
hover here
</button>

【讨论】：

【解决方案2】：

你可以在没有 javascript 的情况下做到这一点，只需 html 标记和 css

  <a href="#" class="popup">
    Tooltip
    <span>
        <strong>Most Light-weight Tooltip</strong><br />
        This is the easy-to-use Tooltip driven purely by CSS.
    </span>
</a>
</div>

使 span 元素 display:none 和 onhover 使其可见，请参阅我的 FIDDLE

【讨论】：