Question

So I’m having this strange problem.

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?

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.

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

My website is located here: http://www.egegorgulu.com

Answer 1

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. Rather than giving #ribbon the background color, add an additional
   child <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.

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.