div可見度連續切換

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");
    });
}); 

小提琴在這里

當您將mouseover在小提琴中的圖像上時，它會繼續隱藏和顯示...

Answer 1

你的小提琴的舉止很合乎邏輯。 您嘗試在鼠標懸停時隱藏某些東西，但是當該項目有效消失時，鼠標不再位於其上！ 因此，有一個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 2

我假設這是因為當按鈕被隱藏時，mouseout會觸發，並且當mouseout觸發時，光標仍在同一位置，因此會觸發mouseover。 建議您將按鈕包裝在容器中，然后將鼠標懸停/鼠標懸停在容器上。 然后，您可以隱藏/顯示內部的按鈕。 在您的小提琴上，您隱藏的是b而不是按鈕。 也許代替

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

它應該是

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

我還注意到您的css懸停樣式也影響了這一點。

Answer 3

您應該使用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屬性。

干杯。

Answer 4

您需要面板的固定高度。 這是因為圖像的高度為400像素，當您將其懸停時，圖像會隱藏並顯示菜單。 但是，菜單高度小於400像素。 現在，您無需懸停面板並再次顯示圖像並重復該問題。 最簡單的解決方法是將面板設置為高度。

.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");
      });
});     

當您將鼠標懸停在整個面板上時，它將刪除文本，然后將其顯示在鼠標移出時。 您不能隱藏一個div並在該div上調用mouseout，帶有懸停的div必須一直呆在那里，以避免閃爍問題。

Answer 6

我得到了我一直在尋找的答案，謝謝大家，因為我能夠通過每個人提供的指導方針和答案來推論結果。

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