鼠标悬停在按钮上以显示描述框

Question

我希望弹出一个小文本框并保持打开状态，直到该按钮不再处于鼠标悬停状态为止。

[将鼠标悬停在按钮上并移动鼠标后消失，如何获得一个带有自定义文本的小框弹出？

非常感谢：）

Answer 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>

Answer 2

您可以只使用html markeup和CSS而无需使用JavaScript

  <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