1. hover方法的语法结构为：hover（enter，leave）
  2.  
  3. hover()当鼠标移动到元素上时，会触发第一个方法，当鼠标移开的时候会触发第二个方法
  4.  
  5. 复制代码
  6. <html>
  7.     <head>
  8.         <title>测试用</title>
  9.         <script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
  10.         <script type="text/javascript">
  11.             window.onload=init;
  12.             function init(){
  13.                 $("#panel h5.head").hover(function(){
  14.                     $(this).next().hide();
  15.                 },function(){
  16.                     $(this).next("div .content").show();
  17.                 });
  18.             }
  19.         </script>
  20.  
  21.     </head>
  22.     <body>
  23.     <div id="panel">
  24.         <h5 class="head">什么事jquery</h5>
  25.         <div class="content">
  26.              混蛋
  27.         </div>
  28.     </div>
  29.  
  30.     </body>
  31. </html>
  32.  
  33. 复制代码
  34.  
  35. toggle(fn1,fn2,fn3..）这个方法是每次单击调用下一个方法，如果方法是最后一个，那么从第一个开始
  36.  
  37. 如果只有2个方法，则是互相切换效果。
  38.  
  39. 复制代码
  40. <html>
  41.     <head>
  42.         <title>测试用</title>
  43.         <script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
  44.         <script type="text/javascript">
  45.             window.onload=init;
  46.             function init(){
  47.                 $("#panel h5.head").toggle(function(){
  48.                     $(this).addClass("highlight");
  49.                     $(this).next().hide();
  50.                 },function(){
  51.                     $(this).removeClass("highlight");
  52.                     $(this).next("div .content").show();
  53.                 });
  54.  
  55.             }
  56.         </script>
  57.         <style type="text/css">
  58.             .highlight{
  59.                 background:#ff3300;
  60.             }
  61.         </style>
  62.     </head>
  63.     <body>
  64.     <div id="panel">
  65.         <h5 class="head">什么事jquery</h5>
  66.         <div class="content">
  67.              混蛋
  68.         </div>
  69.     </div>
  70.  
  71.     </body>
  72. </html>

Jquery——hover与toggle的更多相关文章

  1. JQuery hover toggle事件使用

    JQuery hover toggle事件使用: <%@ page language="java" import="java.util.*" pageEn ...

  2. jquery点击改变class并toggle；jquery点击改变图片src源码并toggle；jquery显示隐藏toggle

    <html><head><meta charset="utf-8"><title></title><script ...

  3. jQuery hover demo

    先放效果图: 百度云下载地址:http://pan.baidu.com/s/1dDpn1Sl 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  4. JQuery hover(over,out) 使用笔记

    转载自:http://www.douban.com/note/202404884/ JQuery hover(over,out) 使用笔记 JavaScript 下.onmouseover() 和 o ...

  5. 基于jquery hover图片遮罩层滑动

    分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  6. css hover伪类选择器与JQuery hover()方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

  7. Jquery中的toggle()方法

    Jquery中的toggle()方法,有一次在看别人写的Jquery插件时,发现对toggle有如下使用 search.pagePrevious.toggle(data.pageNumber > ...

  8. jquery hover最后解决 - 不再疑惑 - 例子在这里

    hover具有动画累计的bug, 可以使用 stop 或 filter(:not(:animated))来消除, 但是, 即使这样, 当鼠标反复滑入或滑出的时候, 虽然没有动画累计的问题, 但是 下面 ...

  9. jQuery hover事件

    hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种"保持在其中"的状态. 当鼠标移动到 ...

随机推荐

  1. Ubuntu下 ssh : connect to host localhost port 22:Connection refused

    Ubuntu下测试ssh时使用ssh localhost 命令,出现错误提示connect to host localhost port 22:Connection refused 造成这个错误的原因 ...

  2. android的logcat详细用法！

    from://http://www.miui.com/article-272-1.html [技术交流]android的logcat详细用法! logcat是Android中一个命令行工具,可以用于得 ...

  3. Android 自动编译、打包生成apk文件 2 - 使用原生Ant方式

    from://http://blog.csdn.net/androiddevelop/article/details/11100109 相关文章列表: <Android 自动编译.打包生成apk ...

  4. 设置TOMCAT SESSIONID 字符长度和生成算法

    修改TOMCAT 默认的生成SESSION ID的算法和字符长度非常简单,只需修改context.xml中的<Manager>标签值,比如: <Manager sessionIdLe ...

  5. linux系统部署Java程序获取ip时报Caused by: java.net.UnknownHostException: XXXXXXXXXX: XXXXXXXXXX: Name or service not known

    问题一: Caused by: java.net.UnknownHostException: XXXXXXXXXX: XXXXXXXXXX: Name or service not known vi ...

  6. parity 钱包

    数据快照路径 C:\Users\admin\AppData\Local\Parity\Ethereum\chains\ethereum\db\906a34e69aec8c0d\snapshot\res ...

  7. TrafficStats——流量统计类的范例，获取实时网速

    2.3开始android就提供来这个类的API,这样我们就可以方便的用他来实现统计手机流量来.这个类其实也很简单,我贴上他的几个方法,大家一看就知道怎么用了. static long getMobil ...

  8. 得到手机当前显示的activity的名字

    /** * @return 手机当前的activity */ String getRunningActivityName(){ ActivityManager activityManager=(Act ...

  9. EndNote在Word中插入文献不能自动生成编号 - 解决方案

    本文出处:新浪博客“小数码植物摄影”之http://blog.sina.com.cn/s/blog_629be3eb0100sih3.html 新浪博客“小数码植物摄影”首页:http://blog. ...

  10. DAU预测

    转自: http://www.kaixin001.com/repaste/80488684_6910412734.html 我们知道在所有的游戏运营数据中,最终要的两个数据莫过于DAU.ARPU了.| ...