2013-02-06 6 views
5

Ho un menu, contenente diversi collegamenti. Voglio che questi collegamenti abbiano un effetto luminoso sullo sfondo quando li alzo.CSS3: sfondo incandescente sul link-hover (non a incandescenza del testo)

L'ho quasi fatto usando la transizione css, box-shadow e un colore di sfondo più chiaro sui collegamenti.

Il problema è che l'effetto di transizione influisce sull'ombra di casella, in modo che quando inizia la transizione, i collegamenti non abbiano un'ombreggiatura, che dà loro un colore di sfondo al quadrato. Quando la transizione è terminata, lo sfondo luminoso sembra buono.

Vedere il mio jsFiddle: http://jsfiddle.net/xCJ46/.

Gradirei molto il vostro aiuto con questo.

Ecco un estratto del mio CSS:

<html><style> 
div a:hover { 
    background: #527fa9; 

    -webkit-box-shadow: inset 0 0 30px 15px #49628a; 
    -moz-box-shadow: inset 0 0 30px 15px #49628a; 
    box-shadow: inset 0 0 30px 15px #49628a; 

    -webkit-transition: 500ms linear 0s; 
    -moz-transition: 500ms linear 0s; 
    -o-transition: 500ms linear 0s; 
    transition: 500ms linear 0s; 
} 
</style></html> 
+1

Aggiungi l'ombreggiatura alla proprietà del collegamento (non al passaggio del mouse). F.e. div a {box-shadow: riquadro 0 0 30px 15px # 49628a; } – reinder

risposta

10

Aggiungere il box-shadow alla proprietà del collegamento (non hover).

div a { box-shadow: inset 0 0 30px 15px #49628a; } 
+0

Grazie! Ha funzionato perfettamente. Si prega di consultare il jsFiddle aggiornato: http://jsfiddle.net/xCJ46/3/ – Chris

Problemi correlati