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

WBOY
リリース: 2016-06-24 12:20:10
オリジナル
1601 人が閲覧しました

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


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

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

マウスをナビゲーション バーから遠ざけるとすぐにドロップダウン メニューが消え、マウスをメニューにまったく移動できなくなります。どうすればよいですか? ? ?どうか、もっと簡単な方法を使用する方が良いです
マウスをメニューの 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 イベントを書くだけです

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート