Question

我有一个包含多个链接的菜单。我希望这些链接在我悬停它们时在背景中产生发光效果。

我几乎在链接上使用css过渡，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>

Answer 1

将框阴影添加到链接的属性中（不悬停）。

div a { box-shadow: inset 0 0 30px 15px #49628a; }

CSS3：链接悬停的发光背景（不是文本发光）

1 个答案: