.mouseenter добавляет «переполнение: нет». Как я могу предотвратить это? И как я могу имитировать hoverIntent?

Question

У меня такая странная проблема.

У меня есть лента, движущаяся позади навигации, паря на предметах, и она содержит старый трюк css-угла, чтобы нарисовать форму ленты. Они позиционируются с помощью отрицательного свойства bottom. Как ни странно, события .mouseenter, похоже, добавляют класс «overflow: none» в «this». Есть ли способ предотвратить это?

И мой второй вопрос: как я могу предотвратить запуск .mouseenter, если мышь просто проходит мимо, вроде как hoverIntent. Я думал, что мыслитель это делает, но, видимо, нет.

Любые советы о том, как сделать это короче &, также приветствуются. Вот код, я бегу noConflict сценарий так, «у» есть переводит $:

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

Answer 1

Это не .mouseenter() что причиняет overflow:hidden, чтобы установить, а скорее то, что вы делаете в ответ на событие mouseenter; другими словами, звонки .animate(). Честно говоря, я не знаю, почему JQuery устанавливает это свойство CSS, но я уверен, что следующий будет решить:

1. Вместо того, чтобы дать #ribbon цвет фона, добавить дополнительный ребенка <div>, который имеет цвет фона
2. Сделав это, вы можете сделать высоту #ribbon полной высоты ленты (т. е. включая треугольные фигуры). Таким образом, overflow:hidden не отрежет эти треугольные фигуры.

Что касается идеи «hoverIntent», возможно, есть некоторые сценарии, которые касаются этой проблемы. Тем не менее, вы действительно должны отправить второй вопрос для этого. Каждый пост здесь должен содержать только один вопрос.