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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Fügen Sie den box-shadow, um die link-Eigenschaft (nicht schweben).
InformationsquelleAutor reinder