.mouseenter增加「溢出：無」我該如何防止這種情況？我怎樣才能模擬hoverIntent？

Question

所以我有這個奇怪的問題。

我有一個功能區在物品上方懸停的同時移動，同時包含舊的css-corner技巧以繪製功能區的形狀。這些被定位爲負底部屬性。奇怪的是，.mouseenter事件似乎在 'this'中添加了「overflow：none」類。有沒有辦法來防止這種情況？

而我的第二個問題是如何防止.mouseenter發射，如果鼠標剛剛通過，有點像hoverIntent。我以爲mouseenter是這樣做的，但顯然不是。

任何有關如何使這個更短的&更好的提示也是受歡迎的。下面是代碼，我運行一個noConflict腳本，「J」是翻譯成$：

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」的想法，可能有一些處理這個問題的腳本。不過，你應該真的發表第二個問題。這裏的每個帖子應該只包含一個問題。