hover方法的语法结构为：hover（enter，leave）

hover()当鼠标移动到元素上时，会触发第一个方法，当鼠标移开的时候会触发第二个方法

复制代码

<html>

    <head>

        <title>测试用</title>

        <script type="text/javascript" src="../jquery-1.3.2.min.js"></script>

        <script type="text/javascript">

            window.onload=init;

            function init(){

                $("#panel h5.head").hover(function(){

                    $(this).next().hide();

                },function(){

                    $(this).next("div .content").show();

                });

            }

        </script>

    </head>

    <body>

    <div id="panel">

        <h5 class="head">什么事jquery</h5>

        <div class="content">

             混蛋

        </div>

    </div>

    </body>

</html>

复制代码

toggle(fn1,fn2,fn3..）这个方法是每次单击调用下一个方法，如果方法是最后一个，那么从第一个开始

如果只有2个方法，则是互相切换效果。

复制代码

<html>

    <head>

        <title>测试用</title>

        <script type="text/javascript" src="../jquery-1.3.2.min.js"></script>

        <script type="text/javascript">

            window.onload=init;

            function init(){

                $("#panel h5.head").toggle(function(){

                    $(this).addClass("highlight");

                    $(this).next().hide();

                },function(){

                    $(this).removeClass("highlight");

                    $(this).next("div .content").show();

                });

            }

        </script>

        <style type="text/css">

            .highlight{

                background:#ff3300;

            }

        </style>

    </head>

    <body>

    <div id="panel">

        <h5 class="head">什么事jquery</h5>

        <div class="content">

             混蛋

        </div>

    </div>

    </body>

</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. Android 和 iOS 应用程序开发对比 [持续更新]

    1.Android 用字典模式统一管理应用程序中UI上用到的所有字符串. 比如文本框的默认文本.按钮的名字等等.表现形式:XML文件 Android中 "@string/text_filed ...

  2. Java类加载机制的理解

    算上大学,尽管接触Java已经有4年时间并对基本的API算得上熟练应用,但是依旧觉得自己对于Java的特性依然是一知半解.要成为优秀的Java开发人员,需要深入了解Java平台的工作方式,其中类加载机 ...

  3. hydra 安装和使用

    udo add-apt-repository ppa:pi-rho/security sudo apt-get update sudo apt-get install hydra hydra -l r ...

  4. mongodb 脚本操作

    MO='mongo'$MO << EOFuse testdbdb.dropDatabase()show dbsexit;EOF

  5. [Android Pro] AndroidStudio IDE界面插件开发（进阶篇之Action机制）

    转载请注明出处:[huachao1001的专栏:http://blog.csdn.net/huachao1001/article/details/53883500] 从上一篇<AndroidSt ...

  6. Kendall Rank（肯德尔等级）相关系数

    1.简介在统计学中,肯德尔相关系数是以Maurice Kendall命名的,并经常用希腊字母τ(tau)表示其值.肯德尔相关系数是一个用来测量两个随机变量相关性的统计值.一个肯德尔检验是一个无参数假设 ...

  7. yolo源码解析（一）

    原文:https://www.cnblogs.com/zyly/p/9534063.html yolo源码来源于网址:https://github.com/hizhangp/yolo_tensorfl ...

  8. YAML文件简介

    编程免不了要写配置文件,怎么写配置也是一门学问. YAML 是专门用来写配置文件的语言,非常简洁和强大,远比 JSON 格式方便. 本文介绍 YAML 的语法,以 JS-YAML 的实现为例.你可以去 ...

  9. go语言之进阶篇定时器重置

    1.定时器重置 示例: package main import ( "fmt" "time" ) func main() { timer := time.New ...

  10. scrapy框架系列 (1) 初识scrapy

    Scrapy 框架 Scrapy是用纯Python实现一个为了爬取网站数据.提取结构性数据而编写的应用框架,用途非常广泛. 框架的力量,用户只需要定制开发几个模块就可以轻松的实现一个爬虫,用来抓取网页 ...