BinaryDevelop
  1. ホーム
  2. jquery

[解決済み] divのhoverとhover outを表示/非表示にする。

2022-02-14 13:54:31

質問事項

divをホバー中、ホバーアウト中に表示、非表示にしたいのですが、どうすればいいですか？

最近やったことはこんな感じです。

css 

$("#menu").hover(function() {
  $('.flyout').removeClass('hidden');
}, function() {
  $('.flyout').addClass('hidden');
});

.flyout {
  position: absolute;
  width: 1000px;
  height: 450px;
  background: red;
  overflow: hidden;
  z-index: 10000;
}

.hidden {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="menu" class="margint10 round-border">
  <a href="#"><img src="images/menu.jpg" alt="" id="menu_link" /></a>
</div>
<div class="flyout hidden">&nbsp;</div>

私の問題は、メニューIDにカーソルを合わせると、フライアウトのdivが点滅していることです。 なぜでしょうか？

どうすればいいですか？

もしかしたら、JSは必要ないかもしれません。CSSでも実現できます。このように書きます。 

.flyout {
    position: absolute;
    width: 1000px;
    height: 450px;
    background: red;
    overflow: hidden;
    z-index: 10000;
    display: none;
}
#menu:hover + .flyout {
    display: block;
}

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します