效果：

代码：

 <!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. 几个方便编程的C++特性

    前言: C++11的自动化特性给编程提供了不少方便,同时也给调试增加了很多负担,至于取舍看程序员的风格和侧重而定. auto:自动类型推断 在C++11之前,auto关键字用来指定存储期.在新标准中, ...

  2. 开发一个 App 有多难？说出来你可能不信！

    上图为程序员客栈儿童类视频APP 1.开发一个APP有多难?说实话,单纯地从开发来说,开发一个APP没有那么难.如果一款APP的基本功能点确定了,开发时间一般为1-2个月就完成了,费用大约5-10万的 ...

  3. 带你认识闻名遐迩的ZBrush

    ZBrush®是一款数字雕刻和绘画软件,它以其强大的功能和直观的工作流程彻底改变了3D行业.ZBrush 4R8是目前最新版本,它秉持一贯的简洁界面风格,给如今的数字艺术工作者提供了世界领先的工具.它 ...

  4. Js中的4个事件

    除了加载文档的事件onload和鼠标相关的一些事件如onclick,onmouseover等.js还有一些相对不常用的事件,这些事件也有各自的应用场景,本文就介绍 onkeydown,oncontex ...

  5. Protocol Buffer格式传输

    1.简单明了介绍ProtocolBuffer 2. ProtocolBuffer(pb)所做事情其实类似于xml.json,也就是把某种数据结构的信息依照某种格式保存起来.主要用于数据存储.传输等. ...

  6. SPOJ DISQUERY LCA + 倍增

    裸题,如此之水- Code: #include<cstdio> #include<algorithm> using namespace std; const int maxn ...

  7. JsonNetResult

    public class JsonNetResult : JsonResult { public JsonNetResult() { Settings = new JsonSerializerSett ...

  8. Git 本地项目添加多个远程仓库

    做了一个小玩意儿,是在 码云 上做的仓储: 还想同时放在 github 上做个备份: 就在 github 上创建了一个新的项目地址: 可以看出,官方给了三种导入方式: 1.创建一个新的项目: 2.推送 ...

  9. 训练1-X

    输入n(n<100)个数,找出其中最小的数,将它与最前面的数交换后输出这些数. Input 输入数据有多组,每组占一行,每行的开始是一个整数n,表示这个测试实例的数值的个数,跟着就是n个整数.n ...

  10. [LUOGU]P4098[HEOI2013]ALO

    BZOJ上的权限题,流下了贫穷的泪水... 可持久化trie的题. 一开始zz了,看错了题,以为是要把所有的宝石缩起来,后来仔细一看好像只缩一次...昨天刷了一晚上的语文病句题白做了... 这样的话就 ...