a:hover stili diversi

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

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