Selettori di fratelli adiacenti CSS - Problema IE8

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

  •  06-07-2019
  •  | 
  •  

Domanda

Sto creando un sistema di menu usando una struttura UL / LI. Sto cercando di utilizzare i selettori di pari livello per i sottomenu hover / show.

Sto usando questo; 

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

La struttura UL sarebbe qualcosa del genere; 

<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>

Presumibilmente, quando si passa con il mouse sopra "Hover Over Me", dovrebbe essere visualizzato il fratello ul. Funziona benissimo in Firefox, ma per niente in IE8. Sono sicuro di aver visto il selettore di fratelli "+" utilizzato in IE8 prima, dove sbaglio?

È stato utile?

Soluzione

Devi assicurarti che IE sia in esecuzione in modalità standard - inserisci un tipo di documento come questo: 

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

Da la documentazione :

  

Il combinatore fratello adiacente è un "segno più" (+) carattere che separa due semplici selettori. Lo spazio bianco non è significativo.

     

Un selettore del modulo "E + F" corrisponde all'elemento F quando segue immediatamente l'elemento fratello E nella struttura del documento, ignorando i nodi non element (come nodi di testo e commenti). Gli elementi E ed F devono condividere lo stesso genitore ed E devono precedere immediatamente F. Per abbinare il primo figlio del genitore, usa la pseudo-classe: first-child.

     

Nota Richiede Windows Internet Explorer 7 o versioni successive.
   Nota I combinatori sono abilitati solo in modalità conforme agli standard (rigoroso! DOCTYPE).

Altri suggerimenti

sarebbe più semplice aggiungere il passaggio del mouse sull'elemento li e correggere il passaggio del mouse per es. usando questo http://www.xs4all.nl/~peterned/csshover.html

es 

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

Spero che aiuti

Josh

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top