gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 11:28:52 25 4
gpt4 key购买 nike

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

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com