我有一个菜单,包含几个链接。我希望这些链接在悬停时在背景中产生发光效果。
我几乎已经在链接上使用 css transition、box-shadow 和较浅的背景色。
问题是过渡效果会影响框阴影,所以当过渡开始时,链接没有框阴影,这给了它们一个方形的背景色。过渡结束后,发光的背景看起来不错。
请看我的jsFiddle:http://jsfiddle.net/xCJ46/ .
非常感谢您对此的帮助。
这是我的 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>
最佳答案
将框阴影添加到链接的属性(不是悬停)。
div a { box-shadow: inset 0 0 30px 15px #49628a; }
关于css-transitions - CSS3 : Glowing background on link-hover (not text-glow),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14728832/