Selezione padre da figlio

[Vicar]

Salve a tutti,
vorrei sapere se fosse possibile selezionare il padre sull'hover del figlio.
In particolare mi servirebbe su questo codice:

<div class="navigator">
       <div class="wrapper">
            <ul>
                  <li>
                         <a href="home.html">Home</a>
                         <ul class="submenu">
                               <li>ciao</li>
                         </ul>
                 </li>
            </ul>
       </div>
</div>

Fare in modo che all'hover del <ul class="submenu"> l'<li> più esterno cambi colore (o anche l'<a> può andarmi bene).
Grazie per l'attenzione

[SimoX90]

non puoi farlo da css perché la pseudoclasse :hover si riferisce solo all'elemento stesso o a elementi figli.
devi utilizzare js oppure jquery, con jquery usi

$(document).ready(function(){
$('.submenu').over(function(){//mouse su uno degli ul
$(this).parent().addClass('classe_cisonosopra');//aggiungi la tua classe per l'over
});
//ma devi anche toglierlo quando il mouse esce! cerca su google la funzione .mouseleave o forse .mouseout e praticamente usi .removeClass('classe_cisonosopra') per togliere la classe
});

[mahamatt]

Prova con questo:

.wrapper>ul>li:hover {color:red;}
.wrapper>ul>li>a{color:inherit}
.wrapper>ul>li>a:hover, .submenu li{color:#000;}
.submenu li:hover{color:blue;} 

In un menu verticale molto semplice come quello del tuo esempio non si riesce a fare molto di più. Per funzionare al meglio, questo esempio presuppone che tutti gli elementi siano box-level.

Giocando con float, overflow e position si possono anche fare cose più complesse e d'effetto, ma tutto dipende da com'è impostato il layout css di questo menu.

Se c'è già del css pronto, puoi postarlo?

[SimoX90]

wrapper>ul>li:hover

questo però avviene ogni volta che il mouse è sopra il 'li' e non quando il mouse è sul 'ul' figlio

[mahamatt]

questo però avviene ogni volta che il mouse è sopra il 'li' e non quando il mouse è sul 'ul' figlio

no, avviene ogni volta che il mouse è sopra il <li> e ANCHE quando il mouse è sul <ul> figlio, in quanto quest'ultimo è contenuto nel <li>

E per evitare che abbia luogo il primo di questi due comportamenti, ho aggiunto

.wrapper>ul>li>a:hover, .submenu li{color:#000;} 

chiaramente, come scrivevo più sopra, tutto dipende dalla struttura css già esistente, in base alla quale possono esserci workaround più o meno efficaci

[SimoX90]

il mio "non" andava inteso come "e non solo"

[mahamatt]

ok, allora ti dò ragione!!

cmq ripeto, il comportamento effettivo dipende dal layout css...

[Vicar]

Grazie per le risposte a entrambi.
Vi spiego più nel dettaglio con un CSS scritto al volo in quanto non sono sulla workstation sulla quale sto lavorando.

Il mio è un menu orizzontale, all'hover del tag <li>, tale <li> deve diventare bianco quindi semplicemente

ul li{
 bacgrkound-color:#000;
}
ul li:hover{
 background-color:#FFF;
}
ul li:hover ul{
 display:block;
}

A questo punto compare il sub-menu, passando sul sub-menu con la freccia e quindi togliendo il cursore dal <li> padre, il <li> padre non risulta più in hover e diconseguenza prende il colore #000;

[Vicar]

Il codice l'ho provato ed è funzionante al 100% e per questo vi ringrazio.
Vorrei ora, se potete, una spiegazione del codice.
Mi spiego meglio: io non riesco a capire dove colleghi l'hover sul figlio al padre!