0

尝试在将鼠标悬停在链接 Log In class="classB" 上时显示一个表单以进行登录，并在将鼠标悬停在链接 My Info 与 class="classA" 上时显示另一个带有信息的框，然后当鼠标离开框时框应该淡出并且链接。但是效果太诡异了，不能正常工作。下面的代码，并在这里看到：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>
4

2 回答 2

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

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

于 2012-06-11T08:32:50.273 回答
1

代码肯定没有优化，但如果您正在寻找快速修复，似乎您#login, .classA在mouseleave处理程序上输入了错误的一秒钟，因为它似乎应该用于#login, .classB.

这是更正后的 jsFiddle。

于 2012-06-11T08:33:37.137 回答