代码之家 › 专栏 › 技术社区 › Anca Ioana Grigore

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

multimedia css html javascript

Anca Ioana Grigore · 技术社区 · 9 年前

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

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

非常感谢:)

2 回复 | 直到 9 年前

repzero 9 年前

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

elreeda 9 年前

您可以在不使用javascript的情况下实现,只需html markeup和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>

制作跨度元素 display:none 悬停使其可见 FIDDLE