在鼠标悬停闪烁时显示/隐藏按钮

Question

我在这里遇到问题。我有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

Answer 1

这很难说，到底为什么发生这种情况，因为我需要看到的幻灯片渲染代码。

有一种技巧，有时候悬停菜单会故意在按钮之间留有一点空间，当鼠标悬停在它们上方时打开，但不希望在鼠标在它们之间移动时丢失它。
诀窍是在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 
}); 

Answer 2

看起来它是因为你不再悬停在#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(); 
});