jquery 菜单在悬停时会动画显示，但在元素之间移动时会折叠...帮助
jquery 菜单被编程为在鼠标悬停时动画显示并在鼠标移开时折叠。然而，当用户将鼠标悬停在项目上时，这是一个问题，因为当用户到达其中一个框的边缘时，它不再将其视为将鼠标悬停在整个菜单上。任何图像上都没有填充/边距或边框。它是一个 2 x 3 的正方形网格，所以所有的都很好地组合在一起。这是与每个列表元素相关的 jquery 代码。
$("li.menu3").mouseover(function(){
$("ul.inactive3").stop().animate({宽度: "500px", 高度: "150px"}, "fast", function( ){ $("ul.inactive3").stop().animate({width: "500px", height: "300px"}, "fast");
});
});
$("li.menu3").mouseout(function(){
$("ul.inactive3").stop().animate({宽度: "500px", 高度: "150px"}, "fast", function( ){ $("ul.inactive3").stop().animate({width: "0px", height: "0px"}, "fast");
});
我尝试通过简单地使用一个图像并在顶部放置多个图像映射来克服这个问题，但这带来了鼠标悬停在 Chrome 中不起作用的新问题。
任何帮助将不胜感激。
谢谢，迈克
The jquery menu is programmed to animate out on mouseover and collapse on mouseout. However this is a problem while the user is hovering over the items as when the user reaches the edge of one of the boxes it no longer counts it as having the mouse over the whole menu. There is no padding / margin or border on any of the images. It is a 2 x 3 grid of squares so all fits together nicely. Here is the jquery code which relates to each list element.
$("li.menu3").mouseover(function(){
$("ul.inactive3").stop().animate({width: "500px", height: "150px"}, "fast", function(){
$("ul.inactive3").stop().animate({width: "500px", height: "300px"}, "fast");
});
});
$("li.menu3").mouseout(function(){
$("ul.inactive3").stop().animate({width: "500px", height: "150px"}, "fast", function(){
$("ul.inactive3").stop().animate({width: "0px", height: "0px"}, "fast");
});
I tried overcoming this by simply using one image and placing several image maps over the top, however this presented new problems of the mouseover not working in chrome.
Any help would be greatly appreciated.,
Thanks, Mike
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我使用一个名为hoverintent 的jquery 插件找到了答案。
链接在这里，以防其他人遇到同样的问题
http://cherne.net/brian /resources/jquery.hoverIntent.html
I figured out the answer, using a jquery plugin called hoverintent.
the link is here incase anyone else comes across the same issue
http://cherne.net/brian/resources/jquery.hoverIntent.html