1

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

我有一个功能区在导航后面移动，同时悬停在项目上，它包含旧的 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

4

1 回答 1

2

这不是.mouseenter()导致overflow:hidden设置的原因，而是您为响应mouseenter事件所做的事情；换句话说，.animate()电话。老实说，我不知道为什么 jQuery 会设置这个 css 属性，但我很确定以下内容会解决它：

  1. 与其提供背景颜色，不如添加一个具有背景颜色#ribbon的附加子项<div>
  2. 完成此操作后，您可以制作#ribbon丝带全高的高度（即包括三角形部分）。这样，overflow:hidden就不会切断那些三角形的碎片。

关于“hoverIntent”的想法，可能有一些脚本可以处理这个问题。但是，您真的应该为此发布第二个问题。这里的每个帖子都应该只包含一个问题。

于 2012-02-01T15:32:38.013 回答