效果：

代码：

 <!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. shell学习第一弹-初识

    1.shell简介: shell是系统的用户界面,提供了用户与内核进行交互的一种接口.可以看做是用户与内核之间的一扇窗户.它接收用户输入的命令并把它送入内核执行. 常见的有bash,tcsh,csh, ...

  2. jquery 星级评价插件jquery Raty的使用

    需要引入的js <script type="text/javascript" src="<%=basePath%>resources/js/jquery ...

  3. tomcat_logs

    tomcat logs 目录下各日志文件的含义 参考地址: http://www.cnblogs.com/signheart/p/0ed0bef7dfadf59534eec76ad4607654.ht ...

  4. 如何构建通用 api 中间层

    零.问题的由来 开门见山地说,这篇文章是一篇安利软文~,安利的对象就是最近搞的 tua-api. 顾名思义,这就是一款辅助获取接口数据的工具. 发请求相关的工具辣么多,那我为啥要用你呢? 理想状态下, ...

  5. CSS 居中【整合】

    <center> text-align:center 在父容器里水平居中 inline 文字,或 inline 元素 vertical-align:middle 垂直居中 inline 文 ...

  6. C#中的Attribute Property区别

    Attribute 一般译作"特性",Property 仍然译为"属性". Attribute 是一种可由用户自由定义的修饰符(Modifier),可以用来修饰 ...

  7. 转载：手游安全破“黑”行动：向黑产业链说NO

    目前的手游市场已被称为红海.从业界认为的2013年的“手游元年”至今,手游发展可谓是既经历了市场的野蛮生长,也有百家争鸣的战国时代.如今,手游市场竞争已趋白热化,增长放缓.但移动互联网的发展大势之下, ...

  8. 移动端js手指滑动事件初体验

    今天在公司遇到做一个移动端手指滑动的效果,刚開始用了swiper.js插件发现效果不好(文字存在模糊效果).后来查了一些资料,自己手写了一个使用原生js写的滑动效果. 以下直接上代码: <!do ...

  9. 彻底禁用resource manager

    禁用resource manager 由于发现系统的一个等待事件:resmgr:cpu quantum.这是由于resource manager的原因.看来resource manager 的bug还 ...

  10. Qt on Android：资源文件系统qrc与assets

    使用 Qt 为 Android 开发应用时,有时我们的应用会携带一些资源文件,如 png . jpg 等,也可能有一些配置文件,如 xml 等.这些文件放在哪里呢? 有两种方式: qrc assets ...