鼠标悬浮文字动画方式弹出信息提示层
分类：实例代码
这早已经是非常频繁使用的效果，下面就分享一段能够实现此功能的代码实例，并给出实现的详细过程。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
.contact{
width:100px;
height:15px;
margin:20px 0 0 50px;
background-color:#CCCCCC;
text-align:center;
font-size:12px;
}
.us{
display:none;
width:300px;
height:40px;
padding:10px;
position:relative;
top:0px;
left:50px;
background-color:#0099FF;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".contact").mouseover(function(){
$(".us").show("slow");
$(".contact").mouseout(function(){
$(".us").hide("slow");
});
});
})
</script>
</head>
<body>
<div class="contact">鼠标悬浮查看效果</div>
<div class="us">pipipi.net是前端教程网的地址</div>
</body>
</html>
上面的代码效果依然是比较简陋的，不过实际应用中可以进行美化，这里只是讲解实现原理。
一.实现原理:
（1）.$(document).ready(function(){})，当文档结构完全加载完毕再去执行函数中的代码。
（2）.$(".contact").mouseover(function(){}）,为class属性值为contact的元素注册mouseover事件处理函数。
（3）.$(".us").show("slow"),当鼠标悬浮的时候提示层显示。
（4）.$(".contact").mouseout(function(){
$(".us").hide("slow");
}),注册mouseout事件处理函数。
当鼠标离开的时候提示层隐藏。
二.相关阅读:
（1）.mouseover事件可以参阅jQuery mouseover事件一章节。
（2）.mouseout事件可以参阅jQuery mouseout事件一章节。
（3）.show()可以参阅jQuery show()一章节。
（4）.hide()可以参阅jQuery hide()一章节。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu