Question

这很简单，但我无法修复此错误。我有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

你的小提琴的行为是非常合乎逻辑的。您尝试在鼠标悬停时隐藏某些内容，但当该项目有效消失时，鼠标不再在其上！所以有一个鼠标！这就是为什么它闪烁，只是尝试实现比这更合乎逻辑的行为，你就不会再遇到那种问题了。

不闪烁的样本：

    $(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 2

我假设这是因为当按钮被隐藏时mouseout会触发，并且当mouseout触发时光标仍然在同一个地方，它会触发鼠标悬停。我建议你将按钮包在一个容器中，然后将鼠标悬停/鼠标悬停在容器上。然后你可以隐藏/显示里面的按钮。在你的小提琴你隐藏b而不是按钮。也许不是

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

应该是

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

我也注意到你的css悬停样式也影响了这个。

Answer 3

您应该使用css属性opacity而不是visibility，否则该元素将不再存在，再次激活鼠标事件。

我有updated your Fiddle，灰色框在鼠标悬停时不可见

但你想要做的是：

$(document).ready(function(e) {
        $("#butt").mouseover(function () {
            $(this).css("opacity","0");
          })
          $("#butt").mouseout(function () {
            $(this).css("opacity","1");
          });
    });

而且你的css正在改变显示，女巫造成了一些可见性问题，你可能想把它改成：

.info {
    display: none;
}

或以其他方式检查哪个元素需要具有：hover属性。

干杯。

Answer 4

面板需要固定的高度。这是因为图像的高度为400px，当您将其悬停时，图像会隐藏并显示菜单。但是，菜单高度小于400px。现在您不是在盘旋并再次显示图像并重复该问题。最简单的修复是将面板高度设置为。

.panel { height:400px;}
.panel ul{ margin:0;}

希望这可以解决您的问题。

Answer 5

如果是可接受的解决方案，您可以执行以下操作以避免闪烁：

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

当您将鼠标悬停在整个面板上时会删除该文本，然后它会在mouseout上显示。您无法隐藏div并在该div上调用mouseout，带有悬停的div必须始终保持在那里以避免闪烁问题。

Answer 6

我得到了我正在寻找的答案，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的鼠标中显示

div可见性不断切换

6 个答案: