jQuery鼠标悬停触发弹出框1
运用mouseover与mouseout事件实现鼠标的悬停触发事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标悬停显示提示信息窗口</title>
<meta http-equiv="content-type">
<style type="text/css">
.content{
display:none;
width:250px;
height:70px;
border-radius:10px;
padding:20px;
position:relative;
top:15px;
left:80px;
background-color:#2F4056;
}
</style>
<script src="https://code.jquery.com/jquery.min.js"></script>
<!--<script src="js/jquery-2.0.3.min.js"></script>-->
<script type="text/javascript">
$(document).ready(function(){
$("#contact").mouseover(function(){
$("#content").show();
$("#contact").mouseout(function(){
$("#content").hide();
});
});
})
</script>
</head>
<body>
<div>
<table >
<tbody>
<tr>
<td id="contact">
点我点我快点我
</td>
</tr>
</tbody>
</table>
</div>
<div id="content" class="content" style="color: white;">
我是一个弹出框
</div>
</body>
- 参考：https://blog.csdn.net/kanhuadeng/article/details/78304741 ↩︎
![实现计算器功能[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)