ホームページ > 記事 > ウェブフロントエンド > ナビゲーション バーのドロップダウン menu_html/css_WEB-ITnose に問題があります
ナビゲーション バーのドロップダウン menu_html/css_WEB-ITnose に問題があります
- WBOYオリジナル
- 2016-06-24 12:20:101535ブラウズ
マウスをナビゲーション バーから遠ざけるとすぐにドロップダウン メニューが消え、マウスをメニューにまったく移動できなくなります。どうすればよいですか? ? ?どうか、もっと簡単な方法を使うのが最善です
ディスカッション (解決策) に返信
[ドロップダウン メニューを非表示にする] セクションにタイマーを追加し、非表示にするまでの時間を指定します。
次に、マウスがドロップダウン メニューに移動したら、タイマーをクリアします。
上記はアイデアです。特定のコードを自分で書くだけで、非常に簡単です。
マウスをナビゲーション バーから遠ざけるとすぐにドロップダウン メニューが消え、マウスをメニューにまったく移動できなくなります。どうすればよいですか? ? ?どうか、もっと簡単な方法を使用する方が良いです
マウスをメニューの ul に移動すると、それが onmouseout イベントであることが表示されます。 ?これはどうなっているでしょうか？ ?
rreee
参考までに。
XML/HTML コード?12345678910111213141516171819202122232425262728293031323331de83afdd5403efb3a3edba6a477f72 メニューに行く時間がないわけではありませんが、メニューに行くと消えてしまいます。メニューに行くまで消えません
onmouseout イベントが一致しません
だからそれは可能です メニューに onmouseover イベントがあります。
特定のコードはありますか?
ドロップダウン メニューはメイン メニューにラップする必要があります
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>延迟提示框</title> <style type="text/css"> #div1{width:200px;height:30px;background:red;} #div2{width:150px;height:20px;background:gray;display:none;margin:10px;} </style></head><body> <div id="div1"></div> <div id="div2"></div></body></html><script type="text/javascript">window.onload = function(){ var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var timer = null; oDiv1.onmouseover = oDiv2.onmouseover = function(){ oDiv2.style.display = 'block'; clearTimeout(timer); }; oDiv1.onmouseout = oDiv2.onmouseout = function(){ timer = setTimeout(function(){ oDiv2.style.display = 'none'; }, 500); };}</script> マウスが空白スペースに移動しました。
移動前に消えてしまうのは、Chromeの要素検査機能を使い慣れている方であれば、移動する際にハイパーリンクのテキストとサブナビゲーションの間に空白があるためです。ブラウザで確認できます。解決策は、メイン ナビゲーション ハイパーリンクのテキストにパディング値を設定することです。たとえば、 #nav a {padding:10px 20px;} と設定すると、マージン値は 0 になります
ドロップダウン メニューを対応するナビゲーション バーに配置します。 label をつけて試してみてください
使い方 JQUERY の非表示で問題ないはずです
ドロップダウンメニューページの onmouseover イベントを書くだけです
熱心なご回答ありがとうございます。私の問題は解決されました