一、事件监听方法

mouseover()   鼠标移入事件方法

mouseout()    鼠标移出事件方法

mouseenter()  鼠标移入事件方法

mouseleave()  鼠标移出事件方法

focus()       获得焦点

blur()        失去焦点

二、hover()方法

【语法1】：

hover(function(){

    鼠标移入执行的代码

},function(){

    鼠标移出执行的代码

});

【语法2】：

hover(function(){

   移入移出两个事件执行的代码

});

参数解释：

1 .hover(参数1,参数2);

2.参数1和参数2是匿名函数function(){}，如果只写一个参数，表示鼠标移入和移出两个事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style type="text/css">

     *{

         margin:0;

         padding:0;

     }

     .con{width:400px; margin:100px auto;}

     .con ul{

         list-style: none;

     }

     .con ul li{

         float:left;

         width:100px;

         height:30px;

         position:relative;

     }

     .con ul li a{

         background: #ccc;

         display: block;

         width:100px;

         height:30px;

         color:#fff;

         font-size:12px;

         line-height: 30px;

         text-align:center;

         text-decoration: none;

     }

     .con ul li a:hover{

         background:pink;

     }

     .con ul ul{

         position:absolute;

         top:30px;

         left:0;

         display: none;

     }

    </style>

</head>

<body>

    <div class="con">

        <ul>

            <li>

                <a href="##">项目内容1</a>

                <ul>

                    <li><a href="##">内容内容</a></li>

                    <li><a href="##">内容内容</a></li>

                    <li><a href="##">内容内容</a></li>

                </ul>

            </li>

            <li>

                <a href="##">项目内容2</a>

                <ul>

                    <li><a href="##">内容内容</a></li>

                    <li><a href="##">内容内容</a></li>

                    <li><a href="##">内容内容</a></li>

                </ul>

            </li>

            <li>

                <a href="##">项目内容3</a>

                <ul>

                    <li><a href="##">内容内容</a></li>

                    <li><a href="##">内容内容</a></li>

                    <li><a href="##">内容内容</a></li>

                </ul>

            </li>

            <li>

                <a href="##">项目内容4</a>

                <ul>

                    <li><a href="##">内容内容</a></li>

                    <li><a href="##">内容内容</a></li>

                    <li><a href="##">内容内容</a></li>

                </ul>

            </li>

        </ul>

    </div>

</body>

</html>

<script src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

// $('.con>ul>li').hover(function(){

    //鼠标移入，向下滑动显示

//  if($(this).children('ul').is(":animated")){

//       return;

//         }

//   $(this).children('ul').slideDown();

// },function(){

    //鼠标移出，向上滑动隐藏

//     $(this).children('ul').slideUp();

// })

  $('.con>ul>li').hover(function(){

      $(this).children('ul').stop(true).slideToggle();

  })

</script>

jquery 事件监听方法的更多相关文章

  1. JavaScript addEventListener()事件监听方法

    addEventListener()方法将事件处理程序附加到指定的元素. addEventListener()方法将事件处理程序附加到元素,而不覆盖现有的事件处理程序. 您可以向一个元素添加许多事件处 ...

  2. Android点击Button按钮的四种事件监听方法总结

    首先我们在activity_main.xml里面先定义一个Button空间 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <RelativeLayout xmlns:a ...

  3. 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）

    DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type       使用options[index]返回具体选项所对应的常用属性:defa ...

  4. jquery easyui控件事件监听委托给jquery事件监听，keyup取最新值问题

    <div id="<?php echo NS; ?>toolbar"> <div style="padding:5px"> ...

  5. jQuery中的事件监听小记

    一,一个事件监听的简便写法 最近发现一个jQuery中事件监听的简洁写法,感觉方便好多.同时也深感自己基础薄弱,好多东西竟然都模棱两可.因此,记录的同时,也对jQuery事件监听做个小的总结 原文链接 ...

  6. 前端基本知识（四）：JS的异步模式：1、回调函数；2、事件监听；3、观察者模式；4、promise对象

    JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous). “同步模式”就是一个任务完成之后,后边跟着一个任务接着执行:程序的执行顺序和排列 ...

  7. javascript的事件监听与捕获和冒泡

    在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调来进行相关的操作. 而js中事件监听方法总共有三种,分别如下所示: element.addEventL ...

  8. Android——按钮的事件监听

    关于Button按钮的四种事件监听方法总结 首先我们在activity_main.xml里面先定义一个Button空间 <RelativeLayout xmlns:android="h ...

  9. JavaScript的事件监听、捕获和冒泡

    在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element. ...

随机推荐

  1. BZOJ - 3295 三维偏序 空间转换

    题意:动态逆序对,共m次删除操作,求每次操作前的逆序对个数 删除操作转换为添加操作,首先对时间a进行简单排序 然后用cdq分治处理b维,树状数组处理c维 此时需要求的是对于某有序组\((a,b,c)\ ...

  2. 编译安装php-5.3.27报错：make: *** [sapi/fpm/php-fpm] 错误 1

    安装PHP的时候make报错:make: *** [sapi/fpm/php-fpm] Error 1 原因:Centos6.8之后已经将iconv库加进来了,如果再安装libiconv库相当于重复一 ...

  3. Python——数据交换格式简要

    简单数据交换格式 CSV: 一般用  open()  函数和字符串拆分  split()  方法,但python有内置的csv模块 读: import csv with open(r"C:\ ...

  4. quickly calc pow(i, n) since i in [1~n]

    #include <bits/stdc++.h> using namespace std; #define inf (0x3f3f3f3f) typedef long long int L ...

  5. mvc Area(区域)相关技术

    ASP.NET MVC中,是依靠某些文件夹以及类的固定命名规则去组织model实体层,views视图层和控制层的.如果是大规模的应用程序,经常会由不同功能的模块组成,而每个功能模块都由MVC中的三层所 ...

  6. python输出不换行

    python输出不换行 Python2的写法是: print 'hello', Python3的写法是: print('hello', end='') 对于python2和python3都兼容的写法是 ...

  7. Java Hashtable 源码(JDK8)

    记录了HashMap也来看看Hashtable吧,最近打算换份实习,所以想看看书回顾一下,不然就快记不得了.....囧啊囧啊,记性太差怎么破??? Hashtable里面的一些变量: Entry< ...

  8. MySQL的模糊搜索

    1.模糊搜索 第一时间我马上想到了关键字 like 1.1.所要查询的字段中包含特定 字符,但不确定其位置,使用两个%包起来 select * from phone where provider li ...

  9. [PY3]——创建多值映射字典？/defaultdict默认字典/setdefault()

    Defaultdict 默认字典 collections 模块中的 defaultdict(默认字典),可以用来构造“一个键映射多个值”这样的字典 如果你想保持元素的插入顺序就应该使用list, 如果 ...

  10. Golang教程：结构体

    结构体(struct)是用户自定义的类型,它代表若干字段的集合.有些时候将多个数据看做一个整体要比单独使用这些数据更有意义,这种情况下就适合使用结构体. 比如将一个员工的 firstName, las ...