css-transitions - CSS3 : Glowing background on link-hover (not text-glow)

标签 css-transitions css glow

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

我几乎已经在链接上使用 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/

相关文章:

jquery - CSS Transitions 在 toggleClass() 之后不工作

css - CSS 过渡持续时间的最大值是多少?

javascript - 单击导航菜单链接时使用 javascript 折叠/展开 DIV

iphone - 让 UILabel 发光并看起来明亮的最佳方法是什么?

c++ - 如何使用着色器制作复古/ NEON /发光效果?

html - CSS动画轻微闪烁

css - 链接无法点击过渡悬停效果

javascript - 为什么我的 div 在移动时不留在我的另一个 div 上?

css - 几个 CSS3 关键帧在 Firefox 19 中不起作用/位置错误

html - 需要使用灯箱悬停时图像发光