Question

当鼠标悬停在链接登录类=“classB”时，尝试创建一个用于登录的表单，当将鼠标悬停在带有class =“classA”的链接“我的信息”时，另一个包含信息的框，则当鼠标离开时该框应该为fadeOut框和链接。但效果太奇怪了，它不能正常工作。下面的代码，请参见此处：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

代码肯定没有优化，但是如果你正在寻找快速修复，那么你似乎错误地在#login, .classA处理程序上错误输入了第二个mouseleave，因为它似乎是{{} 1}}。

这是corrected jsFiddle。

如何解决这种奇怪的行为？悬停链接 - ＆gt;淡出div，mouleave - ＆gt; fadeOut div

2 个答案: