Question

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

我在导航后面移动了一条丝带，同时悬停在物品上，它包含了用于绘制功能区形状的旧css-corner技巧。这些是由负底部属性定位的。奇怪的是，.mouseenter事件似乎是在添加“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()事件所做的事情;换句话说，#ribbon来电。说实话，我不知道为什么jQuery会设置这个css属性，但我很确定以下内容会解决它：

不是给<div>背景颜色，而是添加额外的颜色具有背景颜色的孩子#ribbon
完成此操作后，您可以将overflow:hidden的高度设为色带的整个高度（即包括三角形片段）。这样，{{1}}不会切断那些三角形碎片。

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

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

1 个答案: