鼠标悬停在按钮上以显示说明框

Question

我想要弹出一个小文本框并一直保持到该按钮不再有 onmouseover 为止。

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

非常感谢:)

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

你可以在没有 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

鼠标悬停在按钮上以显示说明框

Onmouseover for a Button to show a description box

html

javascript

css

multimedia