在鼠標懸停閃爍時顯示/隱藏按鈕

我在這裏遇到問題。我有div＃頂級產品，其中包含幻燈片。在該div之外，我有兩個ID：#prevBtn和#nextBtn。這些按鈕是幻燈片的控件。它們被設置爲顯示：無，並且它們使用絕對定位被放置在＃top-products div內。在鼠標懸停閃爍時顯示/隱藏按鈕

<div id="top-products"></div> 
<div id="prevBtn"></div> 
<div id="nextBtn"></div>

我希望按鈕在鼠標移過div＃top-products後立即顯示，當鼠標移出div時消失。

我得到了我的鼠標越過＃頂級產品區域中的按鈕儘快出現

$("#top-products").mouseover(function() { 
    $("#prevBtn, #nextBtn").show(); 
    }); 
    $("#top-products").mouseout(function() { 
    $("#prevBtn, #nextBtn").hide(); 
    });

現在的問題是，一旦我的鼠標越過任何他們纔開始按鈕並反覆關閉。我可以看到它在螢火蟲之間切換顯示無和顯示塊。

有什麼建議嗎？

這裏是它如何工作：http://neolamanite.com/sites/all/themes/test/slider/home-page.html

來源

2011-11-29 Jared Ramirez

嘗試把對prevBtn和nextBtn的「鼠標移開」的功能，而不是頂級產品。 –

只有當我的鼠標不會超過＃頂級產品時，纔會離開側面的按鈕。 –

這很難說，到底爲什麼發生這種情況，因爲我需要看到的幻燈片渲染代碼。

有一種技巧，有時候懸停菜單會故意在按鈕之間留有一點空間，當鼠標懸停在它們上方時打開，但不希望在鼠標在它們之間移動時丟失它。
訣竅是在mouseout事件上放置一個具有小間隔的計時器，並且只有在該計時器之後它才應該隱藏div。

Seomthing這樣的：

$("#top-products").mouseenter(function(){ 
    clearTimeout($(this).data('timeoutId')); 
    $("#prevBtn, #nextBtn").show(); 
}).mouseleave(function(){ 
    var someelement = this; 
    var timeoutId = setTimeout(function(){ $(someelement).find("#prevbtn, #nextbtn").fadeOut("slow");}, 650); 
    $(someelement).data('timeoutId', timeoutId); //set the timeoutId, allowing us to clear this trigger if the mouse comes back over 
});

來源

2011-11-29 20:59:39 gillyb

看起來它是因爲你不再懸停在#top-products（你將鼠標懸停在按鈕），所以它隱藏（然後閃爍再次打開，因爲一旦按鈕被隱藏，你就會再次將它懸停在上面）

如果你能夠編輯你的HTML，最佳的解決方案是將按鈕移動到#top-products之內，根據需要定位它們，並稍微改變你的javascript使用mouseenter和mouseleave事件代替：

<div id="top-products">top products 
    <div id="prevBtn">Prev</div> 
    <div id="nextBtn">Next</div> 
</div> 

$("#top-products").mouseenter(function() { 
    $("#prevBtn, #nextBtn").show(); 
}); 
$("#top-products").mouseleave(function() { 
    $("#prevBtn, #nextBtn").hide(); 
});

來源

2011-11-29 22:06:05 thatdamnqa

試過了。仍然有相同的問題：這是它的行爲：http://neolamanite.com/sites/all/themes/test/slider/home-page.html –

它看起來像你沒有把按鈕放在'#top - 產品'，你需要做到這一點，並相應地定位它們，那麼它應該工作:) – thatdamnqa

在鼠標懸停閃爍時顯示/隱藏按鈕

回答

相關問題