如何解决这种奇怪的行为？悬停链接 -> 淡入 div，鼠标移动 -> 淡出 div

Question

当鼠标悬停在链接 Log In class="classB" 上时，尝试使登录表单出现，当鼠标悬停在带有 class="classA" 的链接 My Info 上时，另一个带有信息的框，然后该框应该在鼠标离开时淡出盒子和链接。但是效果太诡异了，不能正常工作。下面的代码，请看这里：http://jsfiddle.net/75HYL/11/

<ul class="links">
<li class="classA"><a><span>My info</span></a></li>
<li class="classB"><a><span>Log in</span></a></li>
</ul>

<div id="userInfo">CONTENT GOES HERE. THIS BOX SHOULD STAY VISIBLE WHEN MOUSE IS ON IT, FADEOUT WHEN MOUSE LEAVES</div>
<div id="login" >
<div class="form">
<form>
LOGIN FORM HERE. THIS BOX SHOULD STAY VISIBLE WHEN MOUSE IS ON IT, FADEOUT WHEN MOUSE LEAVES
</form>
</div>
</div>

<style>
.links li { display:inline-block;cursor:pointer; }
.links li { padding:0 4px 0 1px; }

.links li.classA {width:147px; height:77px;background:url(../images/sprites01.png) no-repeat -226px 0px;}
.links li.classB {width:147px; height:77px;background:url(../images/sprites01.png) no-repeat -226px 0px;}

.links li.classA span {}
.links li.classB span {}

.links li.classA:hover {background:url(../images/sprites01.png) no-repeat -226px -80px;}
.links li.classB:hover {background:url(../images/sprites01.png) no-repeat -226px -80px;}

.links li.classA a {color:#fff;text-transform:uppercase;background:#00aaff;padding:5px 5px 0 20px;margin:5px 0 0;font-size:1em;height:50px;display:block;}
.links li.classB a {color:#00aaff;text-transform:uppercase;background:orange;padding:5px 5px 0 20px;margin:5px 0 0;font-size:1em;height:50px;display:block;}


#login {display:none;width:250px;height:250px; background:#bbb;color:#000;border:1px solid red;}
#userInfo{display:none;width:250px;height:250px; background:#bbb;color:#000;border:1px solid red;}
</style>

<script>
$("li.classA").hover(function() {
$("#userInfo").fadeIn('fast').css('display', 'block');
});
$("#login, .classA").mouseleave(function() {
$("#userInfo").fadeOut('fast').css('display', 'none');
});


$("li.classB").hover(function() {
$("#login").fadeIn('fast').css('display', 'block');
});
$("#login, .classA").mouseleave(function() {
$("#login").fadeOut('fast').css('display', 'none');
});
</script>

Answer 1

$("li.classA").hover(function() {
    $("#userInfo").fadeIn('fast').css('display', 'block');
}, function() {
    $("#userInfo").fadeOut('fast').css('display', 'none');
});


$("li.classB").hover(function() {
    $("#login").fadeIn('fast').css('display', 'block');
}, function() {
    $("#login").fadeOut('fast').css('display', 'none');
});

悬停处理程序有一个“悬停”部分。我用你的小提琴试过这个，它有效。

Answer 2

代码肯定没有优化，但如果您正在寻找快速修复，似乎您在mouseleave 处理程序上错误地输入了第二个#login, .classA，而这似乎是#login, .classB。

这是corrected jsFiddle。