Onmouseover为Button显示描述框

时间:2016-01-03 11:10:41

标签: javascript html css multimedia

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

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

非常感谢:)

2 个答案:

答案 0 :(得分:0)

使用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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

你可以不用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>

制作span元素display:none并将其设为可见,请参阅我的FIDDLE