.mouseenter增加＆QUOT;溢出：无＆QUOT;我怎样才能prevent呢？我怎么可以模拟hoverIntent？

问题描述

所以我有这个奇怪的问题。

So I'm having this strange problem.

我有一个带状导航后面移动，而徘徊项目，它包含旧的CSS角招绘制丝带的形状。这些都是由负底部属​​性定位。奇怪的是，.mouseenter事件似乎要添加一个溢出：无类
'这个'。有没有一种方法，以prevent呢？

I have a ribbon moving behind the navigation while hovering on items and it contains the old css-corner trick to draw the shape of the ribbon. These are positioned by a negative bottom property. Oddly, .mouseenter events seems to be adding an "overflow:none" class to'this'. Is there a way to prevent this?

和我的第二个问题是，我怎么能prevent从发射了如果鼠标只是路过，有点像hoverIntent的.mouseenter。我以为的mouseenter就是这么做的，但显然不是。

And my second question is how can I prevent the .mouseenter from firing up if the mouse is just passing by, kinda like hoverIntent. I thought mouseenter was doing that but apparently not.

这是如何使这一更短和放任何提示;更好，也欢迎。这里是code，我运行一个脚本noConflict所以'J'是翻译成$：

Any tips on how to make this shorter&better are also welcome. Here is the code, I'm running a noConflict script so 'j' is translates to $:

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');
        });
}

我的网站就设在这里：

推荐答案

这不是 .mouseenter（）这是导致溢出：隐藏来获取设置，而是你响应的mouseenter 事件做什么;换句话说，在 .animate（）调用。说实话，我不知道为什么jQuery的设置这个CSS属性，但我pretty确保以下将解决这个问题：

It's not .mouseenter() that's causing the overflow:hidden to get set, but rather what you do in response to the mouseenter event; in other words, the .animate() calls. To be honest, I don't know why jQuery sets this css property, but I'm pretty sure the following will solve it:

1. 而不是让 #ribbon 的背景颜色，添加一个附加
   子＆LT; D​​IV＆GT; 具有背景色


2. 已经做到了这一点，就可以让 #ribbon 的高度色带的整个高度（即包括三角块）。这样一来，溢出：隐藏不会切断这些三角块

1. Rather than giving #ribbon the background color, add an additionalchild <div> that has the background color
2. Having done this, you can make the height of #ribbon the full height of the ribbon (i.e. including the triangular pieces). That way, overflow:hidden won't cut off those triangular pieces.

在问候了hoverIntent的想法，也有可能是一些脚本，在那里，处理这个问题。但是，你真的应该张贴一个第二个问题。这里每一个职位应该只包含一个单一的问题。

In regards to the "hoverIntent" idea, there are probably some scripts out there that deal with this issue. However, you should really post a second question for that one. Each post here should just contain a single question.

这篇关于.mouseenter增加＆QUOT;溢出：无＆QUOT;我怎样才能prevent呢？我怎么可以模拟hoverIntent？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！