用於按鈕的鼠標懸停以顯示描述框

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