Note that there are some explanatory texts on larger screens.

plurals
  1. PO.mouseenter adds "overflow:none" How can I prevent this? And how can I simulate hoverIntent?
    primarykey
    data
    text
    <p>So I'm having this strange problem. </p> <p>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?</p> <p>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.</p> <p>Any tips on how to make this shorter&amp;better are also welcome. Here is the code, I'm running a noConflict script so 'j' is translates to $:</p> <pre><code>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'); }); } </code></pre> <p>My website is located here: <a href="http://www.egegorgulu.com" rel="nofollow">http://www.egegorgulu.com</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload