CSS3: Glühend hintergrund auf link-hover (nicht text-glühen)

Ich habe ein Menü mit mehreren links. Ich möchte diese links haben einen glühenden Effekt in den hintergrund, wenn ich schweben.

Ich habe es fast geschafft mit css-transition, box-shadow und ein heller hintergrund-Farbe auf die links.

Das problem ist, dass die übergangs-Effekt wirkt sich auf die box-Schatten, so dass, wenn der übergang beginnt, wird der links hat keine box-shadow, die Ihnen ein squared hintergrund-Farbe. Wenn der übergang beendet ist, wird das glühende hintergrund sieht gut aus.

Bitte siehe mein jsFiddle: http://jsfiddle.net/xCJ46/.

Ich würde es sehr schätzen Ihre Hilfe bei diesem.

Hier ein Auszug aus 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>
Fügen Sie die box-shadow, um die link-Eigenschaft (nicht schweben). F. e. div { box-shadow: inset 0 0 30px 15px #49628a; }

InformationsquelleAutor Chris | 2013-02-06

Schreibe einen Kommentar