CSS3：链接悬停时的背景发光效果（而非文字发光）

Question

CSS3：链接悬停时的背景发光效果（而非文字发光）

css-transitionscssglow

6

我有一个菜单，包含几个链接。当我将鼠标悬停在它们上面时，我希望这些链接在背景上产生发光效果。

我使用CSS过渡、盒阴影和较浅的背景颜色几乎做到了这一点。

问题是过渡效果会影响盒阴影，因此当过渡开始时，链接没有盒阴影，这使它们的背景颜色呈正方形。当过渡结束时，闪烁的背景看起来很好。

请查看我的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>

- Chris

1

在链接的属性上添加盒子阴影（非悬停状态）。例如： div a { box-shadow: inset 0 0 30px 15px #49628a; } - reinder

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- reinder · Accepted Answer

将盒阴影添加到链接的属性（非悬停状态）。

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