一、事件监听方法

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. PHP打开错误提示和关闭错误提示的方法

    找到php的配置文件,也就是php.ini 在文件中查找 ‘display_errors’   查找到 display_errors = Off 或者 display_errors = On, Off ...

  2. mysql 查询json字段 json_extract (mysql 5.7及以上)

    找第一层: SELECT * FROM tourists WHERE json_data->'$.weixinOpenId' = '299485886686868' 或者 SELECT * FR ...

  3. 批量生成python自动化测试脚本

    先前有家供应商与我们合作开发自动化工程,采用的py unittest作为脚本运行框架.我发现他们出的脚本都是挨个手写的,格式上也是参差不齐.所以有了根据用例表批量生成脚本的一段小代码 对一个测试脚本必 ...

  4. CentOS&.NET Core初试-2-安装.NET Core SDK和发布网站

    系列目录 CentOS的安装和网卡的配置 安装.NET Core SDK和发布网站 Nginx的安装和配置 安装守护服务(Supervisor) 安装.NET Core SDK 注册Microsoft ...

  5. CTF<密码学> writeup 传统知识+古典密码

    小明某一天收到一封密信,信中写了几个不同的年份          辛卯,癸巳,丙戌,辛未,庚辰,癸酉,己卯,癸巳. 信的背面还写有“+甲子”,请解出这段密文. key值:CTF{XXX} 百度可以查到 ...

  6. (转)使用Cobbler批量部署Linux和Windows：Cobbler服务端部署（一）

    原文:http://www.cnblogs.com/pluse/p/8316914.html http://blog.51cto.com/dreamway/1166589---------Cobble ...

  7. 自适应网页设计（Responsive Web Design）别名（响应式web设计）转载阮一峰

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  8. 日调度万亿次，微服务框架TSF大规模应用——云+未来峰会开发者专场回顾

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 演讲者:张浩 腾讯云中间件产品负责人 背景:众多开发者中,一定经历类似的甜蜜烦恼,就是当线上业务规模越来越大,系统分支发展越来越多的时候,初 ...

  9. ExtJs6编译之后上线报错无法查看到的解决方法

    最近Extjs编译后部署遇到了一个错误c is not a constructor,报错位置在app.js里,这根本没法找 解决方法:用命令sencha app build testing 编译之后, ...

  10. 【转】WEB安全之渗透测试流程

    熟悉渗透流程,攻击会像摆积木一样简单! 0x 01:信息收集 收集网站信息对渗透测试非常重要,收集到的信息往往会让你在渗透中获得意外惊喜. 1. 网站结构 可以使用扫描工具扫描目录,主要扫出网站管理员 ...