jQuery的hover事件，鼠标经过能显示子菜单，移出就不能隐藏子菜单。代码如下

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery的hover事件，鼠标经过能显示子菜单，移出就不能隐藏子菜单。代码如下相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿菜单</title>
<style type="text/css">
bodyfont-size:14px;
ulmargin:0; padding:0; list-style:none;
atext-decoration:none; color:#000;

#wrapposition:relative; top:0px;width:876px; height:34px; line-height:34px; margin:0 auto;
ul#menu lifloat:left; display:block; width:146px; height:34px; text-align:center;
ul#menu li a:link,ul#menu li a:visiteddisplay:block; background:url(link.gif) no-repeat;
ul#menu li a:hoverbackground:url(hover.gif) no-repeat;
/*子菜单*/
ul#menu li ulposition:absolute; top:35px; width:500px; display:none;
ul#menu li ul.sub_menu_2left:130px;
ul#menu li ul.sub_menu_4left:325px;
ul#menu li ul lifont-size:12px; width:70px; height:25px; float:left; display:block;
ul#menu li ul li a:link,ul#menu li ul li a:visitedcolor:#666; background:none; display:inline;
</style>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function()
// var _over = $("ul#menu>li");
$("ul#menu>li:has(ul)").hover(
function()
$(this).children().fadeIn(400);
,
function()
$(this).children.fadeOut();

);
);
</script>
</head>

<body>
<div id="wrap">
<ul id="menu">
<li><a href="#" >凯撒首页</a></li>
<li><a href="#" >最新动态页</a>
<ul class="sub_menu_2">
<li><a href="#">聚焦凯撒</a> | </li>
<li><a href="#">聚焦凯撒</a> | </li>
<li><a href="#">聚焦凯撒</a></li>
</ul>
</li>
<li><a href="#" >产品及预定中心页</a></li>
<li><a href="#" >帮助及查询中心页</a>
<ul class="sub_menu_4">
<li><a href="#">聚焦凯撒</a> | </li>
<li><a href="#">聚焦凯撒</a> | </li>
<li><a href="#">聚焦凯撒</a> | </li>
<li><a href="#">聚焦凯撒</a> | </li>
<li><a href="#">聚焦凯撒</a> | </li>
<li><a href="#">聚焦凯撒</a></li>
</ul>
</li>
<li><a href="#" >会员俱乐部页</a></li>
<li><a href="#" >凯撒论坛页</a></li>
</ul>
</div>
</body>
</html>

参考技术A 将JQ代码改为这样就行：
<script type="text/javascript" language="javascript">
$(function()
$("ul#menu>li:has(ul)").hover(
function()
$(this).find('ul').fadeIn(400);
,
function()
$(this).find('ul').fadeOut(400);

);
);
</script>本回答被提问者和网友采纳

jQuery – 鼠标经过(hover)事件的延时处理

(function($){
    $.fn.hoverDelay = function(options){
        var defaults = {
            hoverDuring: 200,
            outDuring: 200,
            hoverEvent: function(){
                $.noop();
            },
            outEvent: function(){
                $.noop();    
            }
        };
        var sets = $.extend(defaults,options || {});
        var hoverTimer, outTimer;
        return $(this).each(function(){
            $(this).hover(function(){
                clearTimeout(outTimer);
                hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring);
            },function(){
                clearTimeout(hoverTimer);
                outTimer = setTimeout(sets.outEvent, sets.outDuring);
            });    
        });
    }      
})(jQuery);

实现

$("#test").hoverDelay({
    hoverEvent: function(){
        alert("经过我！");
    }
});

　　

以上是关于jQuery的hover事件，鼠标经过能显示子菜单，移出就不能隐藏子菜单。代码如下的主要内容，如果未能解决你的问题，请参考以下文章

jQuery鼠标经过(hover)事件的延时处理

jquery日历，有日程的日期高亮有链接，鼠标经过显示具体日程浮框。

求大神解答html问题鼠标经过和移开问题。

在锚点上触发 jQuery 的 hover() 以显示包含 LI 的下拉菜单？

jquery，怎样可以让鼠标停留在某一区域不少于1秒才会执行代码

jQuery 如何实现 “鼠标悬浮下拉菜单” 效果？