CSS隣接兄弟セレクター-IE8の問題

StackOverflow https://stackoverflow.com/questions/1612587

  •  06-07-2019
  •  | 
  •  

質問

UL / LI構造を使用してメニューシステムを作成しています。ホバー/サブメニューの表示に兄弟セレクターを使用しようとしています。

これを使用しています; 

#MainMenu li.Sel ul li.HasSub a:hover+ul {
     display: block;
}

UL構造は次のようになります; 

<ul id='MainMenu'>
    <li class='Sel'>
    <a href='#'>Click Me</a>
        <ul>
            <li class='HasSub'>
                <a href='#'>Hover Over Me</a>
                <ul>
                    <li>Link</li>
                    <li>Link</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

「Hover Over Me」にカーソルを合わせると、兄弟ulが表示されるはずです。 Firefoxでうまく機能しますが、IE8ではまったく機能しません。以前にIE8で使用されていた「+」兄弟セレクターを見たことがあると思いますが、どこが間違っていますか？

役に立ちましたか？

解決

IEが標準モードで実行されていることを確認する必要があります。次のようなdoctypeを入力します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

ドキュメントから：

>
  

隣接する兄弟コンビネータは「プラス記号」です。 （+）2つの単純なセレクターを区切る文字。空白は重要ではありません。

     

「E + F」形式のセレクター文書ツリー内の兄弟要素Eの直後にある要素Fに一致し、非要素ノード（テキストノードやコメントなど）を無視します。要素EとFは同じ親を共有し、EはFの直前にある必要があります。親の最初の子に一致させるには、：first-child擬似クラスを使用します。

     

注 Windows Internet Explorer 7以降が必要です。
  注 コンビネータは、標準準拠モード（厳密な！DOCTYPE）でのみ有効です。

他のヒント

li要素にホバーを追加し、この http://www.xs4all.nl/~peterned/csshover.html

ie 

#MainMenu li.Sel ul li.HasSub:hover {
     display: block;
}

役立つこと

ジョシュ

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top