地图		广告招租 ←—
订阅
投稿

您的位置：网站首页 > 特效代码 > 其他特效代码 > 正文：jQuery hover合成事件,感应鼠标展开层

jQuery hover合成事件,感应鼠标展开层

日期：2012-2-7 8:47:00 标签：jQuery 感应鼠标展开层 css css特效

∷ PC蛋蛋赚积分换Q币！>>>更多礼品兑换

　　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合成事件,感应鼠标展开层丨芯晴网页特效丨CsrCode.Cn</title>
<script src="/images/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是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
 </div>
</div>
</body>
</html>

<br>第一次运行本代码，请刷新一下页面先~<br>所需js文件：<a href="/images/jquery1.3.2.js">jquery1.3.2.js</a><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</font></p>

提示：您可以先修改代码后再运行，复制和保存代码功能在Firefox下无效。

（本站已开启防盗链,请根据代码中对应的url地址下载保存特效所需的图片、flash和js文件,请见谅,谢谢.）
（本文由 CsrCode.CN|芯晴网页特效收集丨www.CsrCode.cn）

本文网址：

上一篇：CSS+JS 论坛Ajax评分效果

下一篇：jQuery实现页面的文本在线编辑功能

评论信息

抱歉，本文暂停评论留言。

栏目分类

·菜单导航特效
·图层样式特效
·链接文本特效
·网页图片特效
·日期时间特效
·页面窗口特效
·鼠标特效代码
·网页背景特效
·表格表单特效
·状态栏特效
·页面搜索特效
·其他特效代码

热门排行

右侧随滚动条上下浮动的腾讯…
一款非常简单好用的JS广告轮…
超级漂亮的新浪娱乐频道的音…
一个用table做的漂亮的登录框…
[酷] Flash视频器播放器代码…
网页右上角折角效果可关闭的…
JS配合CSS实现的个性漂亮滚动…
Js制作的可以拖动拉伸的左右…
左侧自动隐藏的在线客服
JS实现QQ在线客服状态检测,自…

推荐信息

纯CSS代码表现一座漂亮的房子…
JS感应鼠标显隐的分享图标
JS实现QQ在线客服状态检测,自…
JS单曲调用百度mp3音乐播放器…
点击按钮弹出一个淡入淡出的…
[酷] 音乐歌词同步播放效果
超级漂亮的新浪娱乐频道的音…
又一款很漂亮的网页载入进度…
复制标题和链接，发送给你的…
JS配合CSS实现的个性漂亮滚动…