Jquery 如何纠正这种奇怪的行为？悬停链接->；fadeIn the div，mouleve->；淡出div

当鼠标悬停在class=“classB”中的link Log上时，尝试在登录时显示一个表单，当鼠标悬停在class=“classA”的link My Info上时，尝试在另一个包含信息的框中显示表单，然后当鼠标离开框和链接时，该框应消失。但是效果太奇怪了，它不能正常工作。代码如下，请参见此处：

我的信息
登录

内容在这里。当鼠标位于该框上时，该框应保持可见，当鼠标离开时，该框应消失
登录表单在这里。当鼠标位于该框上时，该框应保持可见，当鼠标离开时，该框应消失
.links li{显示：内联块；光标：指针；}
.links li{填充：0 4px 0 1px；}
.links li.classA{宽度：147px；高度：77px；背景：url（../images/sprites01.png）无重复-226px 0px；}
.links li.classB{宽度：147px；高度：77px；背景：url（../images/sprites01.png）无重复-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；文本转换：大写；背景：#00aaff；填充：5px 5px 0 20px；边距：5px 0 0；字体大小：1em；高度：50px；显示：block；}
.links li.classB a{color:#00aaff；文本转换：大写；背景：橙色；填充：5px 5px 0 20px；边距：5px 0 0；字体大小：1em；高度：50px；显示：block；}
#登录{显示：无；宽度：250px；高度：250px；背景：#bbb；颜色：#000；边框：1px纯红色；}
#用户信息{显示：无；宽度：250px；高度：250px；背景：#bbb；颜色：#000；边框：1px纯红色；}
$（.li.classA”）.hover（函数（）{
$（“#userInfo”）.fadeIn（'fast'）.css（'display'，'block'）；
});
$（“#登录，.classA”）.mouseleave（函数（）{
$（“#userInfo”）.fadeOut（'fast'）.css（'display'，'none'）；
});
$（.li.classB”）.hover（函数（）{
$（“#login”）.fadeIn（'fast'）.css（'display'，'block'）；
});
$（“#登录，.classA”）.mouseleave（函数（）{
$（“#登录”）.fadeOut（'fast'）.css（'display'，'none'）；
});

---

悬停处理程序有一个“悬停”部分。我用你的提琴试过了，效果很好。

代码肯定没有优化，但如果你想快速解决问题，就好像你在

mouseleave

处理程序上为

\login.classB

输入了第二个

\login.classA

---

这是我的目标。

不，这不是我想要实现的目标。当鼠标在链接上或盒子上时，我试图让内容仍然可见的盒子。当鼠标离开链接或框时，包含内容的框应淡出。否则，你如何填写盒子里的表格？就像在网站www.conforama.fr上的屏幕顶部链接“Compte”一样。对不起，这不是我要问的。我希望当鼠标位于链接或框上时，框中的内容仍然可见。只有当鼠标离开链接或框时，包含内容的框才会淡出。否则，你如何填写盒子里的表格？就像在那个网站www.conforama.fr上，在屏幕顶部的顶部链接“Compte”上，将鼠标放在上面，你会看到一个表单。删除链接或表单后，表单会消失。因此，在您的问题中澄清这一点会对您有很大好处。考虑到你真正想要实现的目标，它现在的措辞相当模糊。不要以为我们知道你打算做什么，即使这听起来很明显。

<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>

$("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');
});