ナビゲーションバーのドロップダウン menu_html/css_WEB-ITnose に問題があります-htmlチュートリアル-php.cn

ナビゲーションバーのドロップダウン menu_html/css_WEB-ITnose に問題があります

WBOY

リリース： 2016-06-24 12:20:10

オリジナル

1581 人が閲覧しました

マウスをナビゲーションバーから遠ざけるとすぐにドロップダウンメニューが消え、マウスをメニューにまったく移動できなくなります。どうすればよいですか? ? ?どうか、もっと簡単な方法を使うのが最善です

ディスカッション (解決策) に返信

[ドロップダウンメニューを非表示にする] セクションにタイマーを追加し、非表示にするまでの時間を指定します。
次に、マウスがドロップダウンメニューに移動したら、タイマーをクリアします。
上記はアイデアです。特定のコードを自分で書くだけで、非常に簡単です。

マウスをナビゲーションバーから遠ざけるとすぐにドロップダウンメニューが消え、マウスをメニューにまったく移動できなくなります。どうすればよいですか? ? ?どうか、もっと簡単な方法を使用する方が良いです
マウスをメニューの ul に移動すると、それが onmouseout イベントであることが表示されます。 ?これはどうなっているでしょうか？ ?

rreee
参考までに。

XML/HTML コード?123456789101112131415161718192021222324252627282930313233 メニューに行く時間がないわけではありませんが、メニューに行くと消えてしまいます。メニューに行くまで消えません

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 イベントを書くだけです

熱心なご回答ありがとうございます。私の問題は解決されました