效果：

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="http://www.51rgb.com/js/jquery.js"></script>

     <script type="text/javascript">

         $(function () {

             $("#list").hide();

             //hover(mouseover,mouseout)

             $("#menu").hover(function () {

                 $("#list").slideDown();//slieDown():慢慢出现，还有slideUp，注意大小写

             }, function () {

                 $("#list").hide();

             })

             // 鼠标移动到list的div上的时候list div不会被隐藏

             $("#list").hover(function () {

                 $("#list").show();

             }, function () {

                 $("#list").hide();

             })

         });

 //        $(function () {

 //            $(".menu_right").mouseover(function () {

 //                $(".menu_right img").attr("src", "guowuche_cheng.jpg");

 //                $(".menu_right span").addClass("guowuche_sp");

 //                $(".menu_right ").addClass("guowuche_bg");

 //                //$(".menu_right>div").addClass("guowuchecontent");

 //                $(".menu_right>div").slideDown();

 //            })

 //            $(".menu_right").mouseout(function () {

 //                $(".menu_right img").attr("src", "guowuche_hui.jpg");

 //                $(".menu_right span").removeClass("guowuche_sp");

 //                $(".menu_right ").removeClass("guowuche_bg");

 //                // $(".menu_right>div").removeClass("guowuchecontent");

 //            })

 //            $("body").mouseover(function (e) {

 //                if ($(e.target).closest(".menu_right").length === 0) {

 //                    $(".menu_right>div").slideUp();

 //                }

 //            })

     </script>

 </head>

 <body>

 <div id="menu" style="width: 300px; height: 100px; border: 1px solid red;"></div>

 <div id="list" style="width: 300px; height: 300px; background-color: green;"></div>

 </body>

 </html>

jQuery应用实例3：鼠标经过显示离开隐藏的更多相关文章

  1. jquery控制css的display属性(显示与隐藏)

    jquery控制div的显示与隐藏,很方便的. 例如: $("#id").show()表示display:block, $("#id").hide()表示dis ...

  2. jquery之超简单的div显示和隐藏特效demo

    闲着无聊,看到某视频网站上讲的DIV显示和隐藏的效果,自己也写了一个. 觉得还是挺简单的. 前端改变世界!嘿嘿,还挺有成就感 <!DOCTYPE html PUBLIC "-//W3C ...

  3. -第3章 jQuery方法实现下拉菜单显示和隐藏

    知识点 jquery 的引入方式 本地下载引入 在线引入 children 只获取子元素,不获取孙元素 show() 显示. hide() 隐藏. 完整代码 <!-- Author: XiaoW ...

  4. jquery通过visible来判断标签是否显示或隐藏

    if($(".spnTotal").is(":visible")==false) { alert('隐藏'); } else { alert('显示'); } 

  5. jQuery鼠标经过显示大图

    效果:http://keleyi.com/keleyi/phtml/image/8.htm 以下是完整代码: <!DOCTYPE html> <html lang="en& ...

  6. jquery接触初级-----juqery DOM操作实例，动态图片显示

    1. 要求:对一个a标签元素,当鼠标操作,移入时,显示a标签title属性的信息,鼠标移出时,隐藏a标签属性的title属性信息 a 标签本身的title 属性具有自我显示的特性,但是这个特性比较慢, ...

  7. jQuery实现鼠标悬停显示提示信息窗口的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jQuery鼠标悬停显示提示信息窗体

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 十分钟玩转 jQuery、实例大全(参考自博主索宁)

    十分钟玩转 jQuery.实例大全(参考自博主索宁) 一.简介 书写规则 支持链式操作: 在变量前加"$"符号(var $variable = jQuery 对象): 注:此规定并 ...

随机推荐

  1. bootstrap中container 类和container-fluid类的区别container类所谓的自适应也是通过margin的改变来完成，container-fluid类的百分百宽度是指在固有的15px的padding前提下宽度总是当前视口的宽度。

    container 类和container-fluid类的区别体现在是否有随视口宽度改变的margin存在. container类所谓的自适应也是通过margin的改变来完成,container-fl ...

  2. java equals的用法

    equals方法,用于比较两个对象是否相同,它其实就是使用两个对象的内存地址在比较.Object类中的equals方法内部使用的就是==比较运算符. package Xuexi; public cla ...

  3. C语言提高 (4) 第四天 数组与数组作为参数时的数组指针

    1昨日回顾 const int 和 int const是一样的 const char *p;值不变 char * const p; 指针不能变 编译器对参数的退化: 第三种模型: 三级指针 三级指针局 ...

  4. Java多线程中Sleep与Wait的区别

    Java中的多线程是一种抢占式的机制 而不是分时机制.抢占式机制指的是有多个线程处于可运行状态,但是只有一个线程在运行. 共同点: 1. 他们都是在多线程的环境下,都可以在程序的调用处阻塞指定的毫秒数 ...

  5. [TJOI2018]xor

    题目大意: 有一棵树,根节点为1.每个点有点权.有两种操作. 1. 求节点x所在子树中点权与y异或的最大值.2. 求x到y的路径上点权与z异或的最大值. 解题思路: 可持久化字典树. 对于第一种操作, ...

  6. CF528D Fuzzy Search (生成函数+FFT)

    题目传送门 题目大意:给你两个只包含A,G,C,T的字符串$S$,$T$,$S$长$T$短,按照如下图方式匹配 解释不明白直接上图 能容错的距离不超过$K$,求能$T$被匹配上的次数 $S$串同一个位 ...

  7. Nginx 的安装 与 启动

    没有图文说明,是我看着视频一步一步照做的,安装过程了,也随便把步骤记录下来了. 我是新装 Linux 服务器,所以安装过程中出现的错误也是第一遇到,希望对你们有所帮助. 也是方便自己以后再次安装 ni ...

  8. ELK介绍及搭建 Elasticsearch 分布式集群

    上:https://blog.51cto.com/zero01/2079879 下:https://blog.51cto.com/zero01/2082794

  9. 不引用第三方变量交换a和b的值

    方法一:(可操作字符) a = a^b; b = a^b; a = a^b; 方法二:(可操作字符) a=a+b; b=a-b; a=a-b; 方法三:(不可以操作字符) a=a*b; b=a/b; ...

  10. 【hihocoder 1303】模线性方程组

    [题目链接]:http://hihocoder.com/problemset/problem/1303 [题意] [题解] /* x % m[1] = r[1] x % m[2] = r[2] x = ...