.mouseenter添加“overflow：none”如何防止这种情况？ 我怎样才能模拟hoverIntent？

所以我遇到了这个奇怪的问题。

我有一条丝带在导航后面移动，同时hover在物品上，它包含绘制丝带形状的旧css-corner技巧。 这些是由负底部属性定位的。 奇怪的是，.mouseenter事件似乎是在“this”中添加了“overflow：none”类。 有办法防止这种情况吗？

我的第二个问题是，如果鼠标刚刚经过，我怎么能阻止.mouseenter启动，有点像hoverIntent。 我以为mouseenter正在这样做，但显然不是。

任何有关如何缩短和更好的提示也是受欢迎的。 这是代码，我正在运行noConflict脚本，所以’j’转换为$：

function rbHover(){ j("#nav li a") .on('mouseenter', function() { var l = j(this).parent().position().left; var w = j(this).parent().width(); var rbw = Math.round(w/4); var rbh = Math.round(w/16); j("#ribbon").stop('ribbon', true, true).animate({ "left" : l, "width" : w }, { duration: 600, easing: 'swing', queue: 'ribbon' }).dequeue('ribbon'); j(".rib-left").stop('rib-left', true, true).animate({ "border-right-width": rbw, "border-left-width": rbw, "border-top-width": rbh, "border-bottom-width": rbh, "bottom": "-" + (2*rbh) + "px"}, { duration:600, easing: 'swing', queue: 'rib-left' }).dequeue('rib-left'); j(".rib-right").stop('rib-right', true, true).animate({ "border-right-width": rbw, "border-left-width": rbw, "border-top-width": rbh, "border-bottom-width": rbh, "bottom": "-" + (2*rbh) + "px"}, { duration:600, easing: 'swing', queue: 'rib-right' }).dequeue('rib-right'); }) .on('mouseleave', function() { var l = j(".active").parent().position().left; var w = j(".active").parent().width(); var rbw = Math.round(w/4); var rbh = Math.round(w/16); j("#ribbon").stop('ribbon', true).delay(300, 'ribbon').animate({ "left" : l, "width" : w }, { duration: 600, easing: 'swing', queue: 'ribbon' }).dequeue('ribbon'); j(".rib-left").stop('rib-left', true, true).delay(300, 'rib-left').animate({ "border-right-width": rbw, "border-left-width": rbw, "border-top-width": rbh, "border-bottom-width": rbh, "bottom": "-" + (2*rbh) + "px"}, { duration:600, easing: 'swing', queue: 'rib-left' }).dequeue('rib-left'); j(".rib-right").stop('rib-right', true, true).delay(300, 'rib-right').animate({ "border-right-width": rbw, "border-left-width": rbw, "border-top-width": rbh, "border-bottom-width": rbh, "bottom": "-" + (2*rbh) + "px"}, { duration:600, easing: 'swing', queue: 'rib-right' }).dequeue('rib-right'); }); } 

我的网站位于： http ： //www.egegorgulu.com

Answer 1

不是.mouseenter()导致overflow:hidden得到设置，而是你为响应mouseenter事件做了什么; 换句话说， .animate()调用。 说实话，我不知道为什么jQuery设置这个css属性，但我很确定以下将解决它：

1. 而不是给#ribbon背景颜色，添加一个具有背景颜色的额外子

2. 完成此操作后，您可以将#ribbon的高度设置为function区的整个高度（即包括三角形部分）。 那样， overflow:hidden不会切断那些三角形的碎片。

关于“hoverIntent”的想法，可能有一些脚本处理这个问题。 但是，你应该真的发布第二个问题。 这里的每篇文章都应该包含一个问题。