.mouseenter 添加 "overflow：none" 我怎样才能防止这种情况？如何模拟悬停意图？

Question

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

我有一个功能区在导航后面移动，同时悬停在项目上，它包含了绘制功能区形状的旧css角技巧。它们由负底部属性定位。奇怪的是，.mousenter事件似乎在向添加一个"overflow：none"类"这个"。有办法防止这种情况发生吗？

我的第二个问题是，如果鼠标正好经过，我该如何防止.mousenter启动，有点像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背景色，不如添加一个附加的具有背景色的子<div>
2. 完成此操作后，可以将#ribbon的高度设为色带的全高（即包括三角形部分）。这样，overflow:hidden就不会切掉那些三角形的部分

关于"hoverIntent"的想法，可能有一些脚本可以处理这个问题。然而，你真的应该为这个问题发布第二个问题。这里的每个帖子应该只包含一个问题。