a:hover particolare su link

**blur** · 08-05-2004, 21:04

ciao,
è possibile effettuare con i css un effetto a:hover su link come quello del menu orrizontale nella homepage della microsoft, cioè al passaggio del mouse mi crea un effetto rettangolare con i bordi...?

**flanza** · 08-05-2004, 21:06

Certo basta cambiare colore al background ed ai bordi!

**blur** · 08-05-2004, 21:15

già!
una cosa:
come faccio ad avere lo sfondo( non i bordi) con larghezza/altezza maggiori del link? e poi quando passo con il mouse mantenere fissi i link, perchè si spostano.
grazie

**flanza** · 08-05-2004, 21:24

Per lo sfondo puoi fare un div di larghezza e altezza opportuni.
Per evitare lo spostamento dei link ricorda che i bordi devono sempre valere lo stesso spessore (ad esempio 1) ma deve cambiare il colore che quando non si vede è quello dello sfondo e quando si vede quello che vuoi.
ad esempio:

codice:

<head>
<style>
.bottone{
display:block;
border: solid 1px #aaa;
width:95px;
text-align:center;
text-decoration:none;
color:#000;
}


.bottone:hover{
background:#999;
color:#fff;
border: solid 1px #000;
}
</style>
<body bgcolor= "gray">
Ciao


</body>

**blur** · 08-05-2004, 22:05

ok per i link ci siamo.
però non ho capito come fare con lo sfondo.
sempre prendendo come esempio il sito della microsoft:
microsoft.com home è più largo di MSN home, come faccio ad avere sempre i margini uguali con parole di lunghezze diverse?
non so se mi sono spiegato bene

**flanza** · 08-05-2004, 22:23

Se vuoi 'bottoni' di uguale larghezza scrivi nel css la larghezza.
Se vuoi che abbiano margini uguali scrivi nel css i margini(padding)...
per lo sfondo,(scusa)ma non ho capito bene che vuoi fare...

**deleted_id_48586** · 09-05-2004, 12:04

occhio perchè ovviamente esiste una cosa chiamata box-model quindi se vai a lavorare sui pixel devi considerare che con tutti i borowser tranne IE5.X win la dimensione dei bordi andrà ad aggiungersi alla dimensione che dai al pulsante.

Sperando di esserti stato di aiuto colgo l'occasione per porgerti distinti saluti. :bubu:

Discussione: a:hover particolare su link

Strumenti discussione

Ricerca discussione

Visualizza

a:hover particolare su link

Permessi di invio