學(xué)習(xí)啦 > 學(xué)習(xí)電腦 > 電腦硬件知識(shí) > 鍵盤鼠標(biāo) > jQuery實(shí)現(xiàn)鼠標(biāo)懸停顯示提示信息窗口

jQuery實(shí)現(xiàn)鼠標(biāo)懸停顯示提示信息窗口

時(shí)間： 沈迪豪908由 分享

jQuery實(shí)現(xiàn)鼠標(biāo)懸停顯示提示信息窗口

　　學(xué)習(xí)前端的小伙伴們知道這么用jQuery實(shí)現(xiàn)鼠標(biāo)懸停顯示提示信息窗口嗎?不知道的話跟著學(xué)習(xí)啦小編一起來學(xué)習(xí)怎么用jQuery實(shí)現(xiàn)鼠標(biāo)懸停顯示提示信息窗口。

　　用jQuery實(shí)現(xiàn)鼠標(biāo)懸停顯示提示信息窗口具體方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>鼠標(biāo)懸停顯示提示信息窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.contact{width:100px;height:15px;
margin:20px 0 0 50px;background-color:#CCCCCC;
text-align:center;
}
.us{display:none;width:300px;height:40px;
padding:10px;position:relative;top:0px;left:50px;
background-color:#0099FF;
}
</style>
<script src="jquery-1.6.2.min.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">聯(lián)系我們</div>
<div class="us">提示內(nèi)容！提示內(nèi)容！提示內(nèi)容！</div>
<div>http://www.jb51.net/</div>
</body>
</html>

實(shí)現(xiàn)鼠標(biāo)懸停相關(guān)文章：

1.怎么實(shí)現(xiàn)鼠標(biāo)滑過變色

2.wps演示怎樣制作鼠標(biāo)懸停效果

3.怎么用js實(shí)現(xiàn)簡(jiǎn)單鼠標(biāo)跟隨效果

4.怎么實(shí)現(xiàn)鼠標(biāo)自動(dòng)點(diǎn)擊

5.Dreamweaver怎么實(shí)現(xiàn)鼠標(biāo)經(jīng)過更換圖像

6.聯(lián)想筆記本怎么實(shí)現(xiàn)鼠標(biāo)靠近提示即顯效果

7.鼠標(biāo)事件屬性詳解

1949585