a:hover stili diversi

[skinplast]

Ciao a tutti,
vorrei poter assegnare ad hover della barra dei menu un colore differente dal resto del testo;
riporto parte del codice:

/* Links
--------------------------------------------- */
a {
color: #009BC2;
text-decoration: none;
}
a:hover {
color: #945320!important;
text-decoration: underline;
}

cambiando il colore qui sopra la modifica è valida per tutto il contenuto presente, ovviamente...

questo invece è la struttura del menu di navigazione dove vorrei che l'hover sia di colore nero:

/* Navigations
--------------------------------------------- */
/* --- Main Nav --- */
#branding #mainnav {
margin: 30px 0 0;
max-width: 70%;
float: right;
}

#branding #mainnav ul li {
float: left;
list-style: none;
position: relative;
}
#branding #mainnav ul li a {
margin:0;
padding:9px 14px;
display: block;
font-size: .8em;
text-transform: uppercase;
}
#branding #mainnav ul li:first-child {
margin: 0px;
}
#branding #mainnav ul li a:hover {
background:#efdfca;
color: #999;
text-decoration: none;
}
#branding #mainnav ul ul {
display: none;
float: left;
position: absolute;
top: 2em;
left: 0;
z-index: 99999;
}
#branding #mainnav ul ul ul {
left: 100%;
top: 0;
}
#branding #mainnav ul ul a {
background: #F9F9F9;
padding: 9px 14px;
width: 11em;
height: auto;
text-transform: none;
}
#branding #mainnav li:hover > a,
#branding #mainnav ul ul :hover > a {
background: #F0F0F0;
}
#branding #mainnav ul ul a:hover {
background: #F0F0F0;
}
#branding #mainnav ul li:hover > ul {
display: block;
}


sono abbastanza confuso... qualche suggerimento su come procedere?
Grazie in anticipo

[deleted_20210415]

Onestamente non capisco cosa tu voglia fare, perdonami. Cioè tu vorresti che all'hover di cosa cambiasse che cosa? Non parlare di menù per favore, altrimenti ci si complica tutto , riferisctiti direttamente alle classi o agli id degli elementi

[Prill]

Ciao a tutti,
vorrei poter assegnare ad hover della barra dei menu un colore differente dal resto del testo;
riporto parte del codice:

puoi avere questa formattazione

a {
    color: #009BC2;
    text-decoration: none;
}
a:hover {
    color: #945320;
    text-decoration: underline;
}

che sarà condivisa da tutti i link e poi sovrascrivere le impostazioni volute nei link del menu:

#branding #mainnav ul li a:hover {
    qui le varie proprietà
}

rispetto al tuo codice ho rimosso l'important che dà una priorità alla proprietà anche rispetto a formattazioni successive

[skinplast]

chiedo scusa se non mi sono espresso bene. lavoro su un tema wordpress, quindi il grosso delle modifiche da apportare è nel css e nel codice php (header, functions, ecc..)
nel mio caso devo porre delle modifiche nel foglio di stile, perchè tutti i link, con effetto hover, mantengono lo stesso colore, mentre vorrei che nella barra dei menù (ecco perchè parlavo di menù...) l'hover fosse di un altro colore, come ad esempio il nero. La seconda parte del codice che vi ho incollato riguarda proprio il menù di navigazione.

[skinplast]

puoi avere questa formattazione

a {
    color: #009BC2;
    text-decoration: none;
}
a:hover {
    color: #945320;
    text-decoration: underline;
}

che sarà condivisa da tutti i link e poi sovrascrivere le impostazioni volute nei link del menu:

#branding #mainnav ul li a:hover {
    qui le varie proprietà
}

rispetto al tuo codice ho rimosso l'important che dà una priorità alla proprietà anche rispetto a formattazioni successive

Ho provato a togliere "important", ma facendo così al passaggio del mouse tutti i link mantengono il colore fisso, senza che venga assegnato loro il colore #945320 (che è un marrone scuro);

qui:

#branding #mainnav ul li a:hover {
    qui le varie proprietà
}

mi accetta il cambo colore al passaggio del mouse, ma si tratta solo dello sfondo e non del carattere inserito dentro.
non so se mi spiego...

[deleted_20210415]

Quindi vorresti una cosa del genere...

http://jsfiddle.net/m4qSr/

[skinplast]

Quindi vorresti una cosa del genere...

http://jsfiddle.net/m4qSr/

Si, l'effetto è quello. Solo il background viene applicato, mentre il colore del carattere rimane invariato, nonostante in /*Navigation siano impostati entrambi i parametri:

#branding #mainnav ul li a:hover {
background:#efdfca;
color: #999;
text-decoration: none;
}

Anche togliendo il parametro !important la stringa color:#999; viene ingorata dal codice...

!important è stato rimosso da qui, per testarne l'efficiacia:

/* Links
--------------------------------------------- */
a {
color: #009BC2;
text-decoration: none;
}
a:hover {
color: #945320!important;
text-decoration: underline;
}

C'è qualcosa che mi sfugge... Forse dovrei aggiungere altre stringhe di codice... Scusatemi per la richiesta di aiuto e per come mi esprimo, sono un neofita... questo credo l'avrete capito

[skinplast]

...Se lascio invariato il codice, con !important il colore #945320 viene applicato, ma a qualsiasi link presente nella pagina, mentre vorrei utilizzare un colore diverso nella classe "Navigations", che possiede già la stringa color: #999; ma che viene ignorata...

[deleted_20210415]

#branding #mainnav ul li a:hover {
background:#efdfca;!important
color: #999;
text-decoration: none;
}


​prova così

[skinplast]

#branding #mainnav ul li a:hover {
background:#efdfca;!important
color: #999;
text-decoration: none;
}


​prova così

Grazie INFINITE ShyMurder!!!!!!!
Funziona, ma così:

#branding #mainnav ul li a:hover {
background:#efdfca;
color: #999 !important;
text-decoration: none;
}

Non avevo pensato di aggiungere !important anche alla sub-classe "navigations"

Invece qui:

/* Links
--------------------------------------------- */
a {
color: #009BC2;
text-decoration: none;
}
a:hover {
color: #efdfca !important;
text-decoration: underline;
}

Ho reinserito !important come era in origine e funziona tutto, con due colori hover distinti; uno per il testo pagina ed uno per il testo del menù.

Posso quindi lasciare tranquillamente entrambi?! W3C potrebbe dare notifiche o errori durante la convalida? Verificarlo personalmente non posso, in quanto è in modalità bozza in localhost...