0

これは簡単ですが、このバグを修正することはできません。divデフォルトで表示され、その下のメニューを表示するために非表示になっているがありますが、明らかな理由により、表示効果はとmouseoverだけでなく、繰り返され続けます。mouseovermouseout

次の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

The behavior of your fiddle is very logical. You try to hide something on mouseover, but when the item effectively disappear, the mouse is not on it anymore! So there is a mouseout! That's why it flickers, just try to implement behaviors that are a little bit more logical than that and you will not have that kind of problem anymore.

A sample that does not flicker: 

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

これは、ボタンが非表示のときにmouseoutがトリガーされ、mouseoutがトリガーされたときにカーソルが同じ場所にあるため、mouseoverがトリガーされるためだと思います。ボタンをコンテナにラップし、代わりにコンテナにマウスオーバー/マウスアウトを接続することをお勧めします。次に、内部のボタンを非表示/表示できます。フィドルでは、ボタンではなくbを非表示にしています。おそらく代わりに

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

そのはず

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

また、cssホバースタイルがこれにも影響していることに気づきました。

于 2013-02-26T13:19:04.697 に答える
1

opacity代わりにcss 属性を使用する必要visibilityがあります。そうしないと、要素が存在しなくなり、マウスイベントが再度アクティブになります。

マウスオーバーでグレー ボックスが非表示になるようにFiddle を更新しました

しかし、ここでやりたいことは次のとおりです。

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

誰もが提供したガイドラインと回答から結果を推測できたので、私は探していた回答を得ました。

前述のように、私の JavaScript は、mouseenter で div を非表示にし、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 に答える
0

それが許容できる解決策である場合は、ちらつきを避けるために次のことを行うことができます。

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

これにより、パネル全体にカーソルを合わせるとテキストが削除され、マウスアウト時に表示されます。div を非表示にしてその div で mouseout を呼び出すことはできません。ちらつきの問題を回避するために、ホバーのある div はずっとそこにとどまる必要があります。

于 2013-02-26T13:30:50.983 に答える