jquery - 为什么这个 jquery.hide() 函数不能作用于这个 UL 元素？

Question

子菜单成功出现，但不会用mouseleave隐藏功能。运行 console.log() 显示事件将在鼠标退出 <ul> 的正确时刻触发。 ，但由于某种原因它不会隐藏。但是，我可以更改其他样式(例如 <ul> 的背景为红色或其他。)非常令人费解...

$(document).ready(function() {
    $(".topLine").hover(function() {
        $(".subTopNav").hide(); //hide all potentially open submenus
        $(this).find(".subTopNav").show(); //show this submenu
    });
    $(".subTopNav").mouseleave(function() { //if mouse leaves the submenu
        $(this).hide(); //hide the open submenu (this is what isn't working)
        $(this).css('background-color','red'); //this works
    })
});

<li class="topLine">
<span class="topNavItem">Item 1</span>
<ul class="subTopNav">
    <li><a href="#">subItem 1</a></li>
    <li><a href="#">subItem 2</a></li>
    <li><a href="#">subItem 3</a></li>
</ul>
</li>

#topNavItems { display: inline; line-height: 40px; }
#topNavItems li { display: inline; font-weight: bold; margin-right: 45px; cursor: pointer; }
#topNavItems li a { text-decoration: none; color: #000000; }
.topLine { position: relative; }
.subTopNav { display: none; position: absolute; top: 20px; left: 25%; background-color: #000000; width: 145px; color: #FFFFFF; padding-left: 10px; }
.subTopNav li { display: block; color: #CCCCCC; font-weight: normal !important; font-size: 12px; line-height: 24px; margin-right: 0px !important; }
.subTopNav a { color: #CCCCCC !important; display: block; }
.subTopNav a:hover { color: #FFFFFF !important; }

Answer 1

问题在于，hover() 仅与一个参数函数一起使用会触发 mouseenter 和 mouseleave 的相同函数

.hover( mouseenterHandler,mouseleaveHandler)

或

.hover( singleHandler/* triggers for both events*/)

将 hover 更改为 mouseenter 并且代码可以运行

演示:http://jsfiddle.net/VhDyA/

API 引用:http://api.jquery.com/hover/