jQuery實現(xiàn)hover合成事件的方法
更新時間：2015年08月06日 18:04:15 作者：皮蛋
這篇文章主要介紹了jQuery實現(xiàn)hover合成事件的方法,涉及jquery中hover事件及鏈式操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)hover合成事件的方法。分享給大家供大家參考。具體如下：
jQuery hover合成事件，利用合成Hover事件制作折合面板，鼠標Hover上面即可展開面板，與Click不盡相同，此特效代碼來自鋒利的jQuery一書。
運行效果截圖如下：
具體代碼如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery hover合成事件</title>
<script src="jquery1.3.2.js" type="text/javascript"></script>
<style>
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { padding: 5px; background: #96E555; cursor: pointer }
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block;display:none; }
</style>
<script type="text/javascript">
$(function(){
$("#panel h5.head").hover(function(){
$(this).next("div.content").show();
},function(){
$(this).next("div.content").hide();
})
})
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery hover合成事件，利用合成Hover事件制作折合面板，鼠標Hover上面即可展開面板，與Click不盡相同，此特效代碼來自鋒利的jQuery一書。
</div>
</div>
</body>
</html>
希望本文所述對大家的jquery程序設(shè)計有所幫助。
相關(guān)文章
JQuery1.6 使用方法三，想要學習jquery的朋友可以參考下。2011-11-11
下面小編就為大家?guī)硪黄猨query使用on綁定a標簽無效 只能用live解決。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇jquery入門的文章，確實不錯，前提是大家已經(jīng)對js稍微熟悉一點即可能看懂，非常不錯的jquery入門篇文章。2009-12-12
這篇文章主要介紹了jQuery動態(tài)添加元素后元素注冊事件失效解決，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
jquery.form.js實現(xiàn)將form提交轉(zhuǎn)為ajax方式提交的方法
這篇文章主要介紹了jquery.form.js實現(xiàn)將form提交轉(zhuǎn)為ajax方式提交的方法,涉及jQuery插件實現(xiàn)form表單的Ajax提交技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
jQuery 如何實現(xiàn)一個滑動按鈕開關(guān)
本文給大家分享一段jquery代碼實現(xiàn)滑動按鈕開關(guān)的效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的的朋友參考下2016-12-12
本文給大家分享一款jquery日歷插件，使用jquery日歷插件做日歷，外觀美觀給用戶帶來極好的用戶體驗。對jquery日歷插件感興趣的朋友參考下本篇文章2015-10-10
jQuery實現(xiàn)表格元素動態(tài)創(chuàng)建功能
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)表格元素動態(tài)創(chuàng)建功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)全選、反選和不選功能 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了jquery如何解決resize執(zhí)行兩次的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07