6

我有一个菜单，包含几个链接。当我将它们悬停时，我希望这些链接在背景中具有发光效果。

我几乎已经在链接上使用 css 过渡、框阴影和较浅的背景颜色。

问题是过渡效果会影响 box-shadow，因此当过渡开始时，链接没有 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>
4

1 回答 1

10

将 box-shadow 添加到链接的属性（不是悬停）。

div a { box-shadow: inset 0 0 30px 15px #49628a; }
于 2013-02-06T12:38:55.463 回答