2013-02-06 12 views
5

Ich habe ein Menü, das mehrere Links enthält. Ich möchte, dass diese Links einen leuchtenden Effekt im Hintergrund haben, wenn ich sie schwebe.CSS3: Glühender Hintergrund auf Link-Hover (nicht Textglühen)

Ich habe es fast mit CSS-Übergang, Box-Schatten und eine hellere Hintergrundfarbe auf den Links gemacht.

Das Problem ist, dass der Übergangseffekt den Box-Schatten beeinflusst, so dass die Links beim Start der Transition keinen Box-Shadow haben, der ihnen eine quadratische Hintergrundfarbe verleiht. Wenn der Übergang beendet ist, sieht der leuchtende Hintergrund gut aus.

Bitte beachten Sie meine jsFiddle: http://jsfiddle.net/xCJ46/.

Ich würde Ihre Hilfe sehr schätzen. Hier

ist ein Auszug meiner 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

Fügen Sie der Eigenschaft der Verknüpfung den Box-Schatten hinzu (nicht Hover). F. e. div a {Feld-Schatten: Einfügung 0 0 30px 15px # 49628a; } – reinder

Antwort

10

Fügen Sie die box-shadow zu der Unterkunft Link (nicht schweben).

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

Danke! Das hat perfekt funktioniert. Bitte beachten Sie die aktualisierte jsFiddle: http://jsfiddle.net/xCJ46/3/ – Chris

Verwandte Themen