Question

我在这里遇到了一个问题。我有div #top-products，其中包含幻灯片。在div之外我有两个ID：#prevBtn和#nextBtn。这些按钮是幻灯片的控件。它们已设置为display：none，它们使用绝对定位位于＃top-products div中。

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

我希望一旦我的鼠标越过div #top-products就显示按钮，当我的鼠标移出div时我会消失。

一旦我的鼠标越过＃top-products区域

，我就会显示按钮

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

现在的问题是，只要我的鼠标越过任何按钮，它们就会反复开始和关闭。我可以在firebug上看到它在display none和display block之间切换。

有什么建议吗？

以下是它的表现：http://neolamanite.com/sites/all/themes/test/slider/home-page.html

Answer 1

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

有时候悬停菜单会有一个技巧，有意在按钮之间留有一点空间，当鼠标悬停在它们上面时它们会打开，但是当鼠标在它们之间移动时不想丢失它。 /> 诀窍是在mouseout事件上放置一个间隔较小的计时器，然后才会隐藏div。

像这样的东西：

$("#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和{{ 1}}事件代替：

mouseleave

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

2 个答案: