Aiuto su CSS

[essedi]

Questa espressione
 
        .sdMnMn > li:hover + li

seleziona il primo elemento li successivo a quello su cui si posiziona il cursore del mouse

Quest'altra
 
        .sdMnMn > li:hover ~ li

seleziona tutti gli elementi li successivi a quello su cui si posiziona il cursore del mouse

Esiste un sistema per selezionare tutti gli elementi li fratelli di quello su cui si posiziona il cursore del mouse, anche quelli precedenti?

[lemonsong]

Esiste un sistema per selezionare tutti gli elementi li fratelli di quello su cui si posiziona il cursore del mouse, anche quelli precedenti?

L'ho riletta più volte e sicuramente non ho capito:

Codice:

Only registered users can see contents. Please click here to Register or Login.
Se ho capito male, come non detto.

[essedi]

Esiste un sistema per selezionare tutti gli elementi li fratelli di quello su cui si posiziona il cursore del mouse, anche quelli precedenti?

L'ho riletta più volte e sicuramente non ho capito:

Codice:

Only registered users can see contents. Please click here to Register or Login.
Se ho capito male, come non detto.

 Sono io ad essermi spiegato male. A mia parziale discolpa c'è il fatto che la situazione non è semplice da descrivere.
 
sdMnMn è la classe attribuita al tag <ul> padre
Con
             .sdMnMn > li
assegno le proprietà degli elementi della lista in condizioni normali
 
Con
           .sdMnMn > li:hover 
assegno le proprietà dell'elemento della lista su cui posiziono il cursore del mouse
 
Voglio definire una regola che viene attivata solo quando posiziono il cursore su uno degli elementi della lista e che valga solo per i fratelli di esso.
 
La dichiarazione
          .sdMnMn > li:hover ~ li
 
realizza ciò che voglio, ma solo per gli elementi successivi. Non viene applicata agli elementi che precedono quello nello stato hover
 
Spero di essere riuscito a spiegarmi meglio, altrimenti abbiate pazienza.

Edit: aggiungo un esempio.

 In condizioni normali gli elementi della lista hanno uno sfondo bianco
Quando passo il cursore su uno degli elementi vorrei che lo stesso apparisse su sfondo grigio e tutti gli altri su sfondo verde.
 
 

[lemonsong]

Sono io ad essermi spiegato male. A mia parziale discolpa c'è il fatto che la situazione non è semplice da descrivere.

[...]

Edit: aggiungo un esempio.

 In condizioni normali gli elementi della lista hanno uno sfondo bianco
Quando passo il cursore su uno degli elementi vorrei che lo stesso apparisse su sfondo grigio e tutti gli altri su sfondo verde.

Era chiarissimo essedi, ho letto la domanda senza considerare i due esempi che hai postato 

Ho fatto un esempio per vedere se è quello che cerchi:

http://lemonsong.altervista.org/test_li/

E' una specie di accrocchio, forse coi CSS3 si può fare "naturalmente" e senza dubbio con jQuery andresti "sul sicuro".

Non so se si potrà applicare in tutte le situazioni, eventualmente posta un link con un esempio più completo.

Spero di aver capito, in caso contrario la colpa è del mio Ufficio Anagrafe 

[essedi]

Sono io ad essermi spiegato male. A mia parziale discolpa c'è il fatto che la situazione non è semplice da descrivere.

[...]

Edit: aggiungo un esempio.

 In condizioni normali gli elementi della lista hanno uno sfondo bianco
Quando passo il cursore su uno degli elementi vorrei che lo stesso apparisse su sfondo grigio e tutti gli altri su sfondo verde.

Era chiarissimo essedi, ho letto la domanda senza considerare i due esempi che hai postato 

Ho fatto un esempio per vedere se è quello che cerchi:

http://lemonsong.altervista.org/test_li/

E' una specie di accrocchio, forse coi CSS3 si può fare "naturalmente" e senza dubbio con jQuery andresti "sul sicuro".

Non so se si potrà applicare in tutte le situazioni, eventualmente posta un link con un esempio più completo.

Spero di aver capito, in caso contrario la colpa è del mio Ufficio Anagrafe 

 Intanto grazie per i suggerimenti e per il tempo che mi dedichi.
 
Poi una premessa. Sono fermamente convinto che in un forum in cui uno chiede aiuto ed altri rispondono, il dovere di essere chiaro e farsi capire spetta al primo. Per cui se le tue risposte, sempre molto valide, non risolvono il problema è perché il richiederne (io in questo caso) non è riuscito a spiegarlo bene. Questo deve essere chiaro.
 
Il tuo esempio funziona, ma non risponde in pieno alle mie necessità.  Appena posso pubblico un sito di esempio.
 
Il tutto è nato durante la preparazione, sempre a titolo di esercizio, di un menu orizzontale personalizzato, con sottomenu a cascata (appena pronto lo pubblico sul mio sito di test). Nella sua forma più elementare funziona anche senza la funzionalità richiesta. Nel tentativo di miglioralo, mi sono imbattuto in questa necessità di potere definire una regola valida per tutti i "fratelli" di un elemento nello stato di hover, sovrascrivendo tutte le regole precedentemente ad essi applicate.
Ripeto che il selettore ~ (sibiling) risponde allo scopo, ma seleziona solo gli elementi successivi e non anche quelli precedenti.
Nel frattempo, anche in base alle tue risposte, sto consolidando la convinzione che non è possibile ottenere quello che voglio solo con il CSS.

[lemonsong]

Appena posso pubblico un sito di esempio.

OK, aspettiamo l'esempio 

[essedi]

 Alla fine ho trovato il sistema di adattare il tuo codice in modo da ottenere il risultato voluto.
 
Qui l'esempio funzionante
 
http://www.essedi.altervista.org/_provamenuh/
 
In Impostazione Generali è stato inserito il CSS principale. In Proprietà Pagina la personalizzazione per ogni singola pagina, con l'ausilio dell'ID  della voce di menu in cui la pagina è inserita, tipo
 
.sdMnMn > li[id="sdMn1"] {
            background: #FFFFFF;   /* stesso sfondo del contenuto della pagina */
            height: 24px;
}
 
Mi serviva riportare l'altezza a 22 pixel in caso di mouse su una voce qualsiasi (il colore verde è solo per dare maggiore risalto al fenomeno).
 
Il tuo codice
.sdMnMn:hover > li {
            background: #99FF99;
}
inserito in Impostazioni Generali, non ha effetto sulla pagina aperta.
 
Ho dovuto inserirlo, integrato con l'ID, anche nelle Proprietà delle singole pagine
 
.sdMnMn:hover > li[id="sdMn1"] {
            background: #99FF99;
            height: 22px;
}
 
  Resta il mio dubbio iniziale
 
Questo è l'esempio da cui ero partito
http://www.essedi.altervista.org/_provamenuh0/
 
Nel CSS in Impostazioni Generali è stato inserito
 
.sdMnMn > li:hover ~ li {
            height: 22px;
            background: #99FF99;
}
Con il cursore su Pagina H1, va bene solo se la pagina aperta è Pagina H2 (a destra), mentre non funziona se la pagina aperta è la Home Page.
 
Perché non esiste un selettore simile che vale per tutti gli elementi adiacenti, a sinistra e a destra?
 

[lemonsong]

Mhmm, hai dovuto mettere del codice in ogni pagina per simulare una sorta di "tasto premuto", con JS era più pratico.

Visto che i li hanno un id, tutto questo selettore è superfluo:

.sdMnMn > li[id="sdMn2"]

... è sufficiente scrivere l'id: #sdMn2

Se ho visto bene eh.

Un problema dell'accrocchio e quello di dover fissare la larghezza di ul (.sdMnMn); se vai sopra lo spazio in orizzontale riservato al menu si attiva l'hover.
Potresti anche fissare la larghezza dell'oggetto HTML in header.

Perché non esiste un selettore simile che vale per tutti gli elementi adiacenti, a sinistra e a destra?

A questa domanda non posso rispondere ma visto quello che vuoi ottenere credo che usare solo i CSS sia la soluzione meno pratica.

Naturalmente questo è solo un mio pensiero.

[stesil]

Perché non esiste un selettore simile che vale per tutti gli elementi adiacenti, a sinistra e a destra?

Ciao,

ho cercato ma mi pare che proprio non esista un selettore css che può risalire l'albero del documento.
Quindi o l'accrocchio di lemon - come lo chiama lui - o jquery ... altre alternative io non ne vedo. 

Comunque il menu è proprio bello .

[essedi]

Ciao,

ho cercato ma mi pare che proprio non esista un selettore css che può risalire l'albero del documento.
Quindi o l'accrocchio di lemon - come lo chiama lui - o jquery ... altre alternative io non ne vedo. 

Comunque il menu è proprio bello .

Grazie per la conferma.

E' la seconda volta che Lemon mi fornisce una buona soluzione. La precedente riguardava il modo di centrare il piè di pagina fisso.
Non capisco perché lui li declassifichi ad "accrocchi": per me sono soluzioni molto valide.

Stavo facendo delle prove per sostituire dichiarazioni tipo .sdMnMn > li[id="sdMn2"] con un semplice #sdMn2. Nell'esempio (semplificato) di menu allegato fino ad ora funziona. In un progetto con un menu un po' più complesso no. Per cui credo che conserverò la struttura attuale.
 

[lemonsong]

E' la seconda volta che Lemon mi fornisce una buona soluzione. La precedente riguardava il modo di centrare il piè di pagina fisso.
Non capisco perché lui li declassifichi ad "accrocchi": per me sono soluzioni molto valide.

Grazie essedi 

Non c'è un perché, ogni tanto mi esce fuori quel termine; forse lo uso quando penso/credo siano soluzioni temporanee, in attesa di meglio... una specie di "toppa" 

[essedi]

E questo è il risultato finale della nostra discussione.

http://www.essedi.altervista.org/_menuH/

[GDR]

...non male, bravo.