div可见性连续切换

Question

这很简单，但我就是不能修复这个bug。我有一个默认可见的div，它隐藏在mouseover上以显示其下方的菜单，但由于某些明显的原因，可见性效果不断重复，而不仅仅是在mouseover和mouseout上。

我已经使用了下面的JavaScript

$(document).ready(function(e) {
    $("#butt").mouseover(function () {
        $(this).closest("button").css("visibility","hidden");
    })
    $("#butt").mouseout(function () {
        $(this).closest("button").css("visibility","visible");
    });
}); 

the fiddle is here

当你在小提琴中mouseover图像时，它会一直隐藏和出现...

Answer 1

我得到了我正在寻找的答案，tnax每个人，因为我能够通过每个人提供的指南和答案来推断结果。

如前所述，我的javascripts隐藏了mouseenter上的div，并使其在mouseleave上可见；当鼠标悬停在其上时，它是隐藏的，而浏览器将其理解为mouseleave，因此它可以连续切换、可见和隐藏

因此，我现在做的代码是

$(document).ready(function(e) {
        $("#butt").mouseenter(function () {
            $("#butt").css("visibility","hidden");
          })
          $("#info2").mouseleave(function () {
            $("#butt").css("visibility","visible");
          });
    }); 

因此，mouseleave在它下面的div上，我想在上面div的mousenter上显示它

Answer 2

你的小提琴的行为是非常合理的。你试图在鼠标悬停时隐藏一些东西，但当该物品有效地消失时，鼠标就不再在它上面了！所以有一个mouseout！这就是它闪烁的原因，只要尝试实现比这更符合逻辑的行为，你就不会再有这种问题了。

不闪烁的样本：

    $(document).ready(function(e) {
    $("#butt").mouseover(function () {
        $("span", $(this)).css("visibility","hidden");
      })
      $("#butt").mouseout(function () {
        $("span", $(this)).css("visibility","visible");
      });
});     

http://jsfiddle.net/xMwCN/5/

Answer 3

我假设这是因为mouseout在按钮隐藏时触发，并且因为当mouseout触发时光标仍然在相同的位置，所以它触发mouseover。我建议您将按钮包装在容器中，并将mouseover/mouseout连接到容器上。然后你可以在里面隐藏/显示按钮。在你的小提琴上，你隐藏的是b而不是按钮。也许不是

$(this).css('visibility', 'hidden') 

它应该是

$('button', this).css('visibility', 'hidden')

我也注意到你的css悬停样式也在影响这一点。