使用 jQuery,我如何判断某个元素当前是否正在“悬停”?
我正在创建一个下拉式大型菜单。仅当单击导航列表项时才会出现该菜单。我希望它在鼠标移开时隐藏,但仅在函数运行半秒的 setTimeout 后才隐藏。这将避免意外的鼠标移出,例如鼠标单击列表项,但随后稍微移出位于 li 内的展开的下拉巨型菜单。
所以基本问题是,如何使用 jQuery 来确定当前是否悬停某个元素?
如果它在半秒后悬停,我将保留菜单(如果用户移动了菜单)鼠标移出,但立即回到li)。
如果半秒后,鼠标仍然在li之外,则隐藏菜单。
I'm creating a drop down mega menu. The menu only appears when clicking on the navigation list item. I want it to hide on mouseout, but only after a function runs on a setTimeout of half a second. This will avoid accidental mouseouts, like if the mouse clicks on the list item, but then moves slightly out of the expanded dropped down mega menu that lives within the li.
So the basic question is, how do I use jQuery to determine if an element is currently being hovered?
If it is being hovered after half a second, I'll keep the menu (if the user moved the mouse out, but immediately back into the li).
If after half a second, the mouse is still outside the li, then hide the menu.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
如果您在
mouseenter
或mouseover
菜单时使用clearTimeout
清除超时,那么这将解决您的问题。然后,您所要做的就是在下一次
mouseout
或mouseleave
发生时重置超时。If you simply clear the timeout using
clearTimeout
when youmouseenter
ormouseover
the menu then that will solve your problem.Then all you have to do is reset the timeout when the next
mouseout
ormouseleave
happens.我发现做到这一点的唯一方法是使用插件hoverIntent:
http://cherne .net/brian/resources/jquery.hoverIntent.html
The only way I've found to do this is using the plugin hoverIntent:
http://cherne.net/brian/resources/jquery.hoverIntent.html
jQueryReferenceToElement.is(':hover')
jQueryReferenceToElement.is(':hover')