我有一个类似 Gmail 的注销机制,这样当您将鼠标悬停在用户名(位于右上角)上时,它会向下滑动一个包含“注销”链接的菜单。用户名位于 float 列表上,而滑出的菜单位于内部列表(非 float )上。滑出/滑入是使用 jQuery 执行的。
这就是它应该做的:
- 当用户名悬停在上面时,内部菜单会向下滑动(变得可见);
- 如果鼠标移至内部菜单,内部菜单应保持可见;
- 如果鼠标悬停在其他地方,内部菜单应该向上滑动(变得不可见)。
这就是它目前所做的:
- 鼠标悬停在用户名上时,内部菜单向下滑动;
- 当光标离开用户名时,菜单会向上滑动 - 无论光标位于何处。
感知的解决方案:我相信应该有一个 if
子句来检查光标是否位于内部列表上并保持内部列表打开,这就是让我难住的部分。
编辑:这是当前代码:
HTML:
<ul id="user_spot">
<li><a href="#"><span class="username">username</a>
<ul id="user_spot_links">
<li><a href="/home/sign?out=y">Sign Out</a></li> <br />
</ul>
</li>
</ul>
CSS:
ul#user_spot li {
float:left;
position:relative;
}
ul#user_spot_links {
position:absolute;
top:20px;
display:none;
}
ul#user_spot_links li {
float:none;
clear:both;
}
JS:
$('ul#user_spot li a').hover(function() {
$('ul#user_spot_links').slideDown('slow');
return false;
}, function() {
// this is where I believe the needed code should be"
$('ul#user_spot_links').slideUp('slow');
});
最佳答案
你不需要 JS。
检查这个 fiddle :http://jsfiddle.net/PaKnc/
基本上,向下滑动的 UL 是您将鼠标悬停在其上的 LI 的子级。您可以在 CSS 中操作子级的 CSS 属性。
例如:
#parent #child {
style1;
}
#parent:hover #child {
style2;
}
这里,style1
和 style2
可以完全不同。在我们的例子中,我们通过更改 display
属性来利用这一点。
关于javascript - 类似 Gmail 的退出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8657359/