Effetto hover su menu cliccabile

[samiel]

Altro problemino, anche se è un po' uno sfizio.
Ma i siti non sono forse pieni di "sfizi" grafici"?

Allora... Ho una lista cliccabile come menu
per navigare il sito. Il codice è:

Codice: Seleziona tutto

<ul class="navbar">
		<li><a href="bed.html">Il nostro Bed&Breakfast</a></li>
		<li><a href="paese.html">Il paese</a></li>
		<li><a href="storia.html">La storia</a></li>
		<li><a href="tradizioni.html">Le tradizioni</a></li>
		<li><a href="indirizzi.html">Indirizzi utili</a></li>
		<li><a href="form.php">Scrivici</a></li>
	</ul>[code]
e nel CSS ho messo invece:
[code]ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 10em;
    left: 3em;
    width: 10em;
  }

ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid #1A2894;
  }

ul.navbar a {
    text-decoration: none;

Insomma ci sono dei riquadri rettangolari
con lo sfondo bianco e uno spesso bordo blu.
Le scritte sono in blu. Io vorrei creare
un effetto hover per cui, al passaggio del mouse,
lo sfondo diventa blu e il testo bianco.
Ora, ho provato alcune soluzioni, che però
mi creano uno sfondo blu solo al testo
e trasformano le scritte in bianco
ma il resto della casella resta bianca,
e l'effetto non è gradevole...
Idee? Spu(n)ti? Consigli?

Grazie
M.

[stetroi]

Aggiungi queste righe, non l'ho provato con IE ma dovrebbe funzionare:

ul.navbar li:hover {
background:blue;
}

ul.navbar a:hover {
color:white;
}

e per far si che funzioni anche quando il mouse non e' direttamente sul testo:

ul.navbar a {
text-decoration: none;
display:block
}

ciao,

stefano

[samiel]

Adesso provo la tua soluzione.
Nel frattempo avevo risolto così:

Codice: Seleziona tutto

.navbar{
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 10em;
    left: 3em;
    width: 12em;
}
.navbar a{
display:block;
text-decoration:none;
border-right: 1em solid #1A2894;
margin: 0.5em 0;
padding:3px 10px;
background:white;
font-weight: bold;
color:#1A2894;
}
.navbar a:link,
background:white;
color:#1A2894;
}
.navbar a:visited,
.navbar a:focus,
.navbar a:active{
background:grey;
font-weight: bold;
color:black;
border-color:#000;
}
.navbar a:hover{
background:#1A2894;
font-weight: bold;
color:#FFFFFF;
border-color:#000000;
}
.navbar .curr a:link,
.navbar .curr a:visited,
.navbar .curr a:hover,
.navbar .curr a:focus,
.navbar .curr a:active{
background:#DCDCDC;
font-weight: bold;
color:#000000;
}

Poi ti so dire, visto che la mia è lunghissimaaaaaaaa.....

M.

[samiel]

Sì, il principio è quello e infatti la tua funziona.
La mia soluzione è un po' più "sofisticata"
graficamente e inoltre distingue anche
il link della pagina attualmente visitata.
Mi sto divertendo un sacco.... troppe novità

Grazie!
M.

[danix]

il trucco sta nell'opzione display:block...
nel post xhtml & css - problema liste a cui anche tu avevi partecipato si parlava proprio di questo... come mi ha giustamente consigliato ninobi, non dovresti usare una lista (per questioni di accessibilita) ma dei <p> per ogni item del menu... e settarli "a scalare", prima l'item genitore e poi i link:
.navbar {...}
.navbar a {...}
.navbar a:visited {...}
.navbar a:hover {...}

La visualizzazione grafica la puoi fare direttamente nei parametri di a, ti faccio vedere il mio foglio di stile (su cui sto lavorando anche adesso ):

Codice: Seleziona tutto

.menu { background-color:transparent; width:100%; padding-bottom:5px; font-weight:bold; border-bottom:3px groove #2175bc;}
.buttons { background-color:transparent; border-right:1px solid #000; border-bottom:1px solid #000; color:#00f; margin:0 0 1px 3px; width:95%; font-size:130%;}
.buttons a { display:block; background-color:#2175bc; color:#00f; font-style:normal; font-weight:normal; padding:5px 5px 5px 0.5em; border-left:10px solid #1958b7; text-align:right; border-right:10px solid #508fc4;}
.buttons a:visited { display:block; background-color:#2175bc; color:#00f; padding:5px 5px 5px 0.5em; border-left:10px solid #1958b7; text-align:right; border-right:10px solid #508fc4;}
.buttons a:hover { display:block; background-color:#2586d7; border-left:10px solid #1c64d1; border-right:10px solid #5ba3e0; color:#db0;}
.buttons#cwd a { font-style:italic; font-weight:bold;}
.buttons#cwd a:hover { color:#ca0;}
.menutitle { background-color:transparent; padding:3px 1px; margin:0 0 1px 0; color:#f00; font-size:130%; width:95%; text-align:center;}

e questo è il relativo codice xhtml:

Codice: Seleziona tutto

<div class="menu">
<p class="menutitle">SEZIONI PRINCIPALI</p>
<p class="buttons" id="cwd"><a href="index.html" accesskey="0" title="home page"> » home [0]</a></p>
<p class="buttons"><a href="pages/linux/index.html" accesskey="1" title="linux page">linux [1]</a></p>
<p class="buttons"><a href="pages/various/hacking.html" accesskey="2" title="hacking page">hack [2]</a></p>
<p class="buttons"><a href="pages/scripting/index.html" accesskey="3" title="scripting page">scripts [3]</a></p>
<p class="buttons"><a href="downloads" accesskey="4" title="browse repository">repo [4]</a></p>
<p class="buttons"><a href="pages/various/links.html" accesskey="5" title="links page">links [5]</a></p>
</div>

Per mia esperienza personale ti consiglio di mettere sempre prima visited di hover altrimenti non verrà letto bene il css

Una buona risorsa (che tratta proprio un esempio come quello che vuoi ottenere tu) la trovi qui: --> link
(anche se loro hanno usato una lista, l'esempio si può adattare facilmente alla situazione che ti ho suggerito...

A presto

[samiel]

Sto sperimentando...
Fazie della segnalazione,
l'articolo è dettagliato e molto chiaro
M.