简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホバーが機能せず、スタイルが表示されないのはなぜですか?
P粉842215006
P粉842215006 2023-08-02 20:04:07
0
1
496
<p>ナビゲーション バーをデザインしていますが、マウスオーバーが機能しません。ドロップダウン メニューの「man」項目にカーソルを合わせると、そのホバー スタイルが機能せず、そのスタイルがインスペクターに表示されません。何かある?これは我のHTML代コード:</p> <p><br /></p> <pre class="brush:css;toolbar:false;">/* Navbar コンテナ */ 体 { マージン: 0; パディング: 0; ボックスのサイズ設定: ボーダーボックス; } リ { テキスト装飾: なし。 } .nav-container { 方向: rtl; テキスト整列: 右 } .navbar { オーバーフロー: 非表示; 背景色: #333; フォントファミリー: Arial; } /* ナビゲーションバー内のリンク */ .navbar a { フロート: 右; フォントサイズ: 16px; 色: 白; テキスト整列: 中央; パディング: 14px 16px; テキスト装飾: なし。 } /* ドロップダウン コンテナ */ 。落ちる { フロート: 右; オーバーフロー: 非表示; } /* ドロップダウン ボタン */ .ドロップダウン .ドロップbtn { フォントサイズ: 16px; 境界線: なし。 概要: なし。 色: 白; パディング: 14px 16px; 背景色: 継承; フォント: 継承; /* 携帯電話での垂直方向の配置について重要 */ マージン: 0; /* 携帯電話での垂直方向の配置について重要 */ } /* ドロップダウンのコンテンツ (デフォルトでは非表示) */ .dropdown-content { 表示: なし。 位置: 絶対; 背景色: #f9f9f9; 幅: 100%; 左: 0; ボックスシャドウ: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z インデックス: 1; } .dropdown:hover .dropdown-content { 表示ブロック; } .megamenu-container { 背景色: 水色; 幅: 100%; } .megmenu { 幅: 100%; } .megamenu-title { 幅: 20%; 背景色: 青; 表示: インラインブロック; パディング: 5px 15px; 垂直配置: 上; } .megamenu-subitems-default { 幅: 70%; 背景色: 青紫; 表示: インラインブロック; パディング: 15px; } .megamenu-item { float: 設定を解除します!重要; パディング: 0 !重要; } .man:hover .megamenu-subitems-default { 可視性: 非表示; } #サブアイテム { 表示: インラインブロック; 可視性: 非表示; 背景色: 黄緑; 幅: 70%; } .man:hover #subitems { 可視性: 可視; } 。テスト { 色: 黄色; } .man:ホバー .test { 色: 小麦; }</pre> <pre class="brush:html;toolbar:false;"><!DOCTYPE html> <html lang="ja"> <頭> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA 互換" content="IE=edge"> <meta name="viewport" content="width=device-width、initial-scale=1.0"> <リンク rel="スタイルシート" href="./megamenu.css"> <title>ドキュメント</title> </head> <本体> <div class="nav-container"> <div class="ナビゲーションバー"> <a href="#home">ホーム</a> <a href="#news">ニュース</a> <div class="ドロップダウン"> <button class="dropbtn">ドロップダウン <i class="fa fa-caret-down"></i> </ボタン> <div class="ドロップダウンコンテンツ"> <div class="メガメニューコンテナ"> <div class="megmenu"> <div class="メガメニュータイトル">
    <リ> <div class="男"> <a class="megamenu-item" href="#">男</a> </div> </li> <li id="女性"> <a class="megamenu-item" href="#">女性</a> </li> <li id="キッド"> <a class="megamenu-item" href="#">子供</a> </li> </ul> </div> <div class="megamenu-subitems-default"> <p>こんにちはデフォルト</p> </div> <div class="megamenu-subitems-test" id="subitems"> <p>hello-1</p> </div> <div class="megamenu-subitems"> <p>hello-2</p> </div> <div class="megamenu-subitems"> <p>hello-3</p> </div> <div class="megamenu-subitems"> <p>hello-4</p> </div> </div> </div> <p class="テスト">テスト</p> </div> </div> </div> </div> </ボディ> </html></pre> <p><br /></p> <p>当我悬停止在“男”项目在我的下拉菜单、它的悬样式不作動，不显示停止样式在検査</p>
P粉842215006
P粉842215006

全員に返信(1)
P粉226413256
P粉2264132562023-08-03 18:28:06 1棟

CSS ファイルには次のルールがあります:

リーリー

ただし、#subitem は .man の子孫ではありません。 #subitem は .man と同じレベル、またはその子孫として配置する必要があります。

この CSS ルールは、.hover がクラス .man の祖先のいずれかの上にあるときに、ID #subitems を持つ要素が表示されるように指定します。ただし、HTML では、.man は の子要素である A div です。メガメニューアイテム。

デフォルトの子 div を非表示にするには、このセレクターを置き換えてみてください:

リーリー ＃＃＃と：＃＃＃ リーリー

各メニュー項目のサブ項目については、各サブ項目 div に一意の ID を与え、JavaScript を使用してその可視性を制御するか、li 要素を持つ .megamenu-subitems div が同じレベルになるようにレイアウトを変更することをお勧めします。兄弟セレクターを使用するか、それらを li 要素の子孫にします。

いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！