问题
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
回答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:
- Rather than giving
#ribbon
the background color, add an additional child<div>
that has the background color - 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.
来源:https://stackoverflow.com/questions/9098410/mouseenter-adds-overflownone-how-can-i-prevent-this-and-how-can-i-simulate