Menu
I have a menu, containing several links. I want these links to have a glowing effect in the background when I hover them.
I have almost made it using css transition, box-shadow and a lighter background-color on the links.
The problem is that the transition-effect affects the box-shadow, so that when the transition starts, the links has no box-shadow, which gives them a squared background-color. When the transition has ended, the glowing background looks fine.
Please see my jsFiddle: http://jsfiddle.net/xCJ46/.
I would very much appreciate your help with this.
Here is an extract of my 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>
319
Add the box-shadow to the link's property (not hover).
div a { box-shadow: inset 0 0 30px 15px #49628a; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
