鼠标悬停的闪烁问题

时间:2013-09-04 02:38:44

标签: jquery

我发现许多其他成员遇到同样的问题,但是没有一个成员能够接近我的脚本来修复问题,或者我没有jquery的技术知识来自己解决问题。

我有一个简单的向上滑动菜单下拉菜单,我注意到当我将鼠标移到孩子身上时它会闪烁

我把它放在http://jsfiddle.net/noeg/F9QYb/2/这里来证明问题

(function ($) {

$("#menu > ul > li:has(ul)").mouseenter(function () {
    $(this).find("ul").stop(true, true).slideDown();
}).mouseleave(function () {
    $(this).find("ul").stop(true, true).slideUp();
});

})(this.jQuery);

感谢。

2 个答案:

答案 0 :(得分:2)

只需添加一个短暂的延迟:

$("#menu > ul > li:has(ul)").mouseenter(function () {
    $(this).find("ul").stop(true, true).delay(300).slideDown();
}).mouseleave(function () {
    $(this).find("ul").stop(true, true).delay(300).slideUp();
});

http://jsfiddle.net/samliew/F9QYb/3/

答案 1 :(得分:0)

菜单和子菜单之间的空白区间触发mouseleave,因为它不再位于<li>内。

解决此问题的一种方法是在菜单项上添加填充,使其符合子菜单的底部,因此光标不会离开li,也不会触发mouseleave。< / p>

这是一个解决方案:http://jsfiddle.net/F9QYb/6/