CSS Dropdown菜单在鼠标输出时保持可见状态

Question

任何人都可以了解最佳方法吗？

我今天根据suckerfish的儿子创建了一个CSS下拉菜单。我希望用JS稍微增强它，以便在鼠标输出时鼠标上可见的<ul>然后在屏幕上停留几秒钟。

这是Faux Dropdown CSS菜单的链接

http://www.eagleworks.co.uk/test/cssdropdown/

任何链接或建议都很棒。

全部谢谢

Answer 1

您可以使用超时来完成此操作。

以下内容应该有效：

创建一个全局变量：var theTimeout = null;

然后改变mouseout和mouseover分别设置和清除超时。

sfEls[i].onmouseover=function() {
    clearTimeout(theTimeout);
    this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
    var self = this;
    theTimeout = setTimeout(function(){
        self.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    },2000);
} 

如果页面上有多个下拉列表，则需要一组超时，以便每次打开另一个菜单时都不会覆盖它们。