0

这很简单，但我无法修复这个错误。我有一个div默认可见并隐藏mouseover以显示其下方的菜单，但出于某种明显的原因，可见性效果会不断重复自身，而不仅仅是在mouseoverand上mouseout。

我使用了以下 JavaScript

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

小提琴在这里

当您mouseover在小提琴中的图像时，它会不断隐藏和出现...

4

6 回答 6

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/

于 2013-02-26T13:27:35.143 回答
1

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

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

它应该是

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

我还注意到您的 CSS 悬停样式也影响了这一点。

于 2013-02-26T13:19:04.697 回答
1

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

我已经更新了你的小提琴，灰色盒子在鼠标悬停时不可见

但是你想在这里做的是：

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

而且您的 css 正在更改显示，女巫导致了一些可见性问题，您可能希望将其更改为：

.info {
    display: none;
}

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

干杯。

于 2013-02-26T13:47:42.273 回答
0

您需要面板的固定高度。这是因为图像的高度是 400px，当你悬停它时，图像会隐藏并显示菜单。但是，菜单高度小于 400px。现在您没有悬停面板并再次显示图像并重复问题。最简单的解决方法是为面板设置高度。

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

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

于 2013-02-26T13:28:13.953 回答
0

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

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

当您将鼠标悬停在整个面板上时，这会删除文本，然后它会出现在 mouseout 上。您不能隐藏 div 并在该 div 上调用 mouseout，带有悬停的 div 必须一直呆在那里以避免闪烁问题。

于 2013-02-26T13:30:50.983 回答
0

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

如前所述，我的 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 的 mouseenter 上显示

于 2013-02-27T07:18:46.023 回答