单击鼠标悬停按钮以显示描述框

Onmouseover for a Button to show a description box

本文关键字：显示 描述 按钮 鼠标 悬停 单击      更新时间：2023-09-26

我希望弹出一个小文本框，并一直保持在上面，直到该按钮没有onmouseover为止。

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

非常感谢：）

使用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>

您可以在没有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和悬停使其可见查看我的FIDDLE

相关文章：