快捷導(dǎo)航

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

更新時(shí)間：2015年04月30日 09:39:29 作者：休閑生活文化

這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)懸停顯示提示信息窗口的方法,涉及jQuery操作鼠標(biāo)事件及show、hide等方法的使用技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)鼠標(biāo)懸停顯示提示信息窗口的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!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://m.fzitv.net/</div>
</body>
</html>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery EasyUI Panel面板組件使用詳解
這篇文章主要為大家詳細(xì)介紹了jQuery EasyUI Panel面板組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
jquery實(shí)現(xiàn)自定義圖片裁剪功能【推薦】
本文主要介紹了jquery實(shí)現(xiàn)自定義圖片裁剪功能，代碼超級(jí)簡(jiǎn)單，易修改。下面跟著小編一起來(lái)看下吧
2017-03-03
動(dòng)態(tài)調(diào)用css文件——jquery的應(yīng)用
這篇文章主要介紹了動(dòng)態(tài)調(diào)用css文件——jquery的應(yīng)用
2007-02-02
基于jQuery的checkbox全選問(wèn)題分析
這篇文章主要介紹了基于jQuery的checkbox全選問(wèn)題,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)全選功能中遇到的問(wèn)題與相應(yīng)的解決方法,需要的朋友可以參考下
2016-11-11
簡(jiǎn)單講解jQuery中的子元素過(guò)濾選擇器
這篇文章主要介紹了jQuery中的子元素過(guò)濾選擇器,列舉了一些操作DOM時(shí)獲取父元素的一些方法,需要的朋友可以參考下
2016-04-04
40個(gè)有創(chuàng)意的jQuery圖片、內(nèi)容滑動(dòng)及彈出插件收藏集之一
在網(wǎng)頁(yè)的首頁(yè)或圖片專題頁(yè)面很多地方都會(huì)用到圖片滑動(dòng)插件來(lái)循環(huán)切換多張圖片，并且用戶可以點(diǎn)擊左右按鈕來(lái)切換圖片。相信大家都知道jQuery是最優(yōu)秀的Javascript框架之一
2011-12-12
jquery $("#variable") 循環(huán)改變variable的值示例
這篇文章主要介紹了jquery $("#variable")如何循環(huán)改變variable的值,需要的朋友可以參考下
2014-02-02
jquery彈窗插件colorbox綁定動(dòng)態(tài)生成元素的方法
這篇文章主要介紹了jquery彈窗插件colorbox綁定動(dòng)態(tài)生成元素的方法,colorbox是一款非常好用的彈窗插件,需要的朋友可以參考下
2014-06-06
jquery實(shí)現(xiàn)table鼠標(biāo)經(jīng)過(guò)變色代碼
table鼠標(biāo)經(jīng)過(guò)變色的效果想必大家都有見(jiàn)到過(guò)吧，其實(shí)實(shí)現(xiàn)很簡(jiǎn)單，在本文有個(gè)不錯(cuò)的示例，感興趣的朋友可以學(xué)習(xí)下
2013-09-09
jquery實(shí)現(xiàn)倒計(jì)時(shí)代碼分享
最近做的項(xiàng)目，需要倒計(jì)時(shí)，翻了翻資料，寫了出來(lái)，分享給大家，歡迎拍磚，jquery庫(kù)自己記得引用哈
2014-06-06