jQuery应用实例3：鼠标经过显示离开隐藏

最新推荐文章于 2022-07-13 19:46:59 发布

weixin_30920091

最新推荐文章于 2022-07-13 19:46:59 发布

阅读量146

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qzj-it/p/8394964.html

版权

效果：

代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="http://www.51rgb.com/js/jquery.js"></script>
 7     <script type="text/javascript">
 8         $(function () {
 9             $("#list").hide();
10             //hover(mouseover,mouseout)
11             $("#menu").hover(function () {
12                 $("#list").slideDown();//slieDown():慢慢出现，还有slideUp，注意大小写
13             }, function () {
14                 $("#list").hide();
15             })
16             // 鼠标移动到list的div上的时候list div不会被隐藏
17             $("#list").hover(function () {
18                 $("#list").show();
19             }, function () {
20                 $("#list").hide();
21             })
22         });
23 //        $(function () {
24 //            $(".menu_right").mouseover(function () {
25 //                $(".menu_right img").attr("src", "guowuche_cheng.jpg");
26 //                $(".menu_right span").addClass("guowuche_sp");
27 //                $(".menu_right ").addClass("guowuche_bg");
28 //                //$(".menu_right>div").addClass("guowuchecontent");
29 //                $(".menu_right>div").slideDown();
30 //            })
31 //            $(".menu_right").mouseout(function () {
32 //                $(".menu_right img").attr("src", "guowuche_hui.jpg");
33 //                $(".menu_right span").removeClass("guowuche_sp");
34 //                $(".menu_right ").removeClass("guowuche_bg");
35 //                // $(".menu_right>div").removeClass("guowuchecontent");
36 //            })
37 //            $("body").mouseover(function (e) {
38 //                if ($(e.target).closest(".menu_right").length === 0) {
39 //                    $(".menu_right>div").slideUp();
40 //                }
41 //            })
42     </script>
43 </head>
44 <body>
45 <div id="menu" style="width: 300px; height: 100px; border: 1px solid red;"></div>
46 <div id="list" style="width: 300px; height: 300px; background-color: green;"></div>
47 </body>
48 </html>

View Code

转载于:https://www.cnblogs.com/qzj-it/p/8394964.html

weixin_30920091

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery应用实例3：鼠标经过显示离开隐藏

效果：代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="http://www.51...
复制链接

扫一扫