非常敏感的onmouseout行爲

我想設計類似於「檢查可用性」按鈕在http://www.thedana.com/上可以看到的東西 - 我已經使用了w3school.com中的jquery.js文件，並獲得了以下內容：http://quaaoutlodge.com/drupal-7.14/ （立即預訂標籤）。現在，當你意識到的時候，它非常敏感，有時候它不應該消失（當光標仍然在場地中間時），我該如何使這個更好，更友好？非常敏感的onmouseout行爲

謝謝！羅恩

更新：我試圖實現這一點，但它並不完全工作，因爲我想表明我的「褪色」的div在鼠標懸停在「書」，並保持它的光標向下移動，在「褪色「我該如何做到這一點？ Url：http：//quaaoutlodge.com/drupal-7.14/

來源

2012-10-06 cerr

把div#fade放在div#book裏面，這樣可以解決你一半的問題。您也必須修改CSS以適應此更改。

學習者另一個非常重要的觀點是，jQuery提供了不引人注意的跨瀏覽器事件偵聽器附加。這意味着，內聯JS中的onmouseenter="handler()"不僅是不必要的，而且在技術上也很醜陋 - 與行爲混合的結構 - 它也污染了具有函數名稱的全局範圍。

這就是people針對W3School宣傳的原因之一。

但回到主題這裏使用DOM Ready handler和hover一個解決方案：

Fiddle

HTML

<div id="book"> 
    <a href="/drupal-7.14//?q=book">Book Now</a> 
    <div id="fade">TEST</div> 
</div>

$(function() { 
    var fade = $('#fade'); 
    $('#book').hover(function() { 
     fade.fadeIn(); 
    }, function() { 
     fade.fadeOut(); 
    }); 
});

同樣，您將不得不返回CSS來刪除position:absolute和#fade的頁邊距。

來源

2012-10-06 05:31:10

感謝Fabricio似乎一般工作，但如果我保持我的光標，讓我們說的前三分之一的下跌，分區淡出並再次消失，爲什麼會這樣？：o – cerr

在我的小提琴中，還是在您的頁面中實現了它？似乎無法在小提琴中重現它。檢查是否沒有任何其他mouseout/mouseover功能衝突，如果它在您的頁面中。 '：P' –

@cerr你的頁面中有一個'div＃top'，由於'position：relative'位於'div＃fade'之上。嘗試從中刪除'position：relative'。 –

你可以嘗試使用jQuery的.mouseleave而不是通用的onmouseout？

http://api.jquery.com/mouseleave/

「MouseLeave事件從鼠標移開的不同之處它處理事件冒泡的方式。如果鼠標移出，在此例子中使用，則當將鼠標指針移出所述內部元件的，處理程序將被觸發。這通常是不受歡迎的行爲，另一方面，mouseleave事件只在鼠標離開綁定的元素時觸發它的處理程序，而不是後代。因此，在本例中，當鼠標離開Outer元素時觸發處理程序，但不是內在因素。「

來源

2012-10-06 05:11:21

謝謝Al，請參閱上面的我的更新。 – cerr

非常敏感的onmouseout行爲

回答

相關問題