一、事件监听方法

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. 进阶篇：4）面向装配的设计DFA总章

    本章目的:理解装配的重要性,明确结构工程师也要对装配进行设计. 1.基础阅读 ①进阶篇:1)DFMA方法的运用: ②需要一台FDM3d打印机:请查看 基础篇:8)结构设计装备必备: 2.为什么要学习D ...

  2. 进阶篇：4.2）DFA设计指南：优化装配工序

    本章目的:针对每一个装配工序,运用DFA进行优化. 1.前言 工序的优化在产品的精简之后. 这个是作者的实际做完DFA后得出的结论.原因倒是很简单,一个精密的产品,哪怕只是优化了一个零件,对整体的装配 ...

  3. &与&& ，|与||的区别

    &&和||是短路运算符,&和|是非短路运算符 &&与& 区别:两者都表示“与”运算,但是&&运算符第一个表达式不成立的话,后面的表达式不 ...

  4. 基于iTop4412的FM收音机系统设计(一)

    说明:第一版架构为:APP+JNI(NDK)+Driver(linux),优点是开发简单,周期短,也作为自己的毕业设计 现在更新第二版,FM服务完全植入Android系统中,成为系统服务,架构为:AP ...

  5. pandas数据清洗

    1.我已安装好Anavonda3.5.所以我只用打开"jupyter notebook",然后打开浏览器 然后点击右侧的“new",然后打开python3

  6. CSAPP阅读笔记-汇编语言初探(数据传送类指令)-来自第三章3.2-3.3的笔记-P115-P128

    1.如何由机器代码生成汇编代码? objdump -d再加上文件名即可直接在终端看到由反汇编器恢复的汇编代码.注意,文件名并不一定得是.o文件,任何可执行文件都可以. 结果如下: 仅列举了反汇编tes ...

  7. Ad Click Prediction: a View from the Trenches (2013)论文阅读

    文章链接: https://static.googleusercontent.com/media/research.google.com/zh-CN//pubs/archive/41159.pdf 补 ...

  8. 深入redis内部---网络编程

    Redis在anet.h和anet.c中封装了底层套接字实现: 1.anetTcpServer,建立网络套接字服务器,完成对socket(),bind(),listen()等操作的封装,返回socke ...

  9. 有标号的DAG计数 III

    Description 给定一正整数n,对n个点有标号的有向无环图进行计数,这里加一个限制:此图必须是弱连通图.输出答案 mod 10007 的结果. Solution 弱连通图即把边变成无向之后成为 ...

  10. mariadb sequence

    MariaDB 10.3 正式版推出后,有了像 Oracle.PostgreSQL 里的序列特性. 同时表字段AUTO_INCREMENT原特性还保持,但是sequence特性在某些特定情境还是很有用 ...