-
Dodiz.
User deleted
Ho trasformato il menù (come mi ha detto alchimist) in una lista, ma c'è un problema con l'hover..
questo è il css:SPOILER (clicca per visualizzare)CODICE...
/* Menu toolbar */
#menu_tul {
height: 100%;
}
ul#menu_tul li
{
text-align: center;
float: left;
border-right: 1px solid #222;
display: block;
position: relative;
}
ul#menu_tul li a {
float: left;
padding: 12px 30px;
font-weight: bold;
}
ul #menu_tul li a:hover{
background: #666;
color: white;
}
...
Questo invece è l'htmlSPOILER (clicca per visualizzare)HTML<table id='toolbar'>
<tr><td id='logo'>
<a href="/"><img src='images/logo.png'></a>
</td>
<td>
<ul id='menu_tul'>
<li><a href='/'>HOMEPAGE</a></li>
<li><a href='/'>MOBILE</a></li>
<li><a href='/'>COMPUTER</a></li>
<li><a href='/'>CINEMA</a></li>
<li><a href='/'>DOWNLOAD</a></li>
<li><a href='/'>GUIDE</a></li>
</ul>
</td>
</tr>
</table>
in pratica l'ultima istruzione del css non funzionaHTMLul #menu_tul a:hover {
background: #666;
color: white;
}
ma se inserisco questaCODICEa:hover{
font-weight: bold;
color: white;
background-color: #666;
border-top: 1px solid #333;
}
l'effetto del link con colore di sfondo cambiato, la transizione del colore e tutto il resto funziona...sapete il perchè?
. -
uomoinverde.
User deleted
Non credo che sia la risposta giusta (sono digiuno di CSS), ma può darsi che il codice sotto sia funzionante: CODICE#menu_tul > li:hover {
background-color: #666;
color: white;
}
Tuttavia credo che non cambierà il colore del testo, se è un link, ma tentar non nuoce! Praticamente, con questa regola si specifica che tutti gli elementi li figli dell'elemento con ID menu-tul, al passaggio del cursore, assumono le proprietà elencate. Ripeto, non sono sicuro che abbia effettivamente validità :-). -
Dodiz.
User deleted
Non credo che sia la risposta giusta (sono digiuno di CSS), ma può darsi che il codice sotto sia funzionante:CODICE#menu_tul > li:hover {
background-color: #666;
color: white;
}
Tuttavia credo che non cambierà il colore del testo, se è un link, ma tentar non nuoce! Praticamente, con questa regola si specifica che tutti gli elementi li figli dell'elemento con ID menu-tul, al passaggio del cursore, assumono le proprietà elencate. Ripeto, non sono sicuro che abbia effettivamente validità :-)
l'avevo trovato da qualche parte e non ne ho mai capito l'utilità xD
Comunque si, funziona, grazie mille ^^
per il link ho risolto, basta aggiungere aCODICE#menu_tul > li:hover a {
background-color: #666;
color: white;
}. -
.
Chiedo scusa per il Necroposting, seppur di un mese e mezzo.
Quel ">", significa che TUTTI i figli LI di #menu_tul, al quale è applicata una sovrapposizione del mouse, avranno quell'effetto.
Chiedo scusa per il link, ma per approfondire meglio il concetto, puoi controllare la pagina dedicata di HTML.IT riguardante i selettori combinatori e le relazioni tra elementi.
Spero di esserti stato d'aiuto seppur tu abbia già risolto con il tuo problema! Ciao!
.
a:hover |
Contacts