html鼠标离开块元素隐藏,jQuery如何实现鼠标经过显示离开隐藏

本篇教程介绍了jQuery如何实现鼠标经过显示离开隐藏，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

<

代码：

1 html>

2 

3 

4     

5     

Title

6     

7     

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     

43 

44 

45 

46 

47 

48 

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道！