当悬停在jquery中的另一个div上时,将一个div的线性渐变背景更改为另一个线性渐变

时间:2011-11-18 11:58:53

标签: jquery css gradient

我目前正处理div背景问题。

我有两个div:div1和div2。

我希望将div2的背景设置为两种颜色的线性渐变(让我们说橙色到绿色)。

当鼠标悬停在div1上时,我希望div2的线性渐变变为另一个线性渐变(例如从红色到蓝色),但是具有“淡入”效果。

到目前为止,我已经在jquery网站上找到了一些东西来实现这一点但只有简单的颜色而不是渐变。我尝试了很多东西,包括在互联网上添加一些jquery颜色管理插件,但我无法做出我想做的事情:(

我试过从div切换类但我无法设置“计时器”以实现平滑过渡。

这是小提琴: http://jsfiddle.net/Spagh/8FWaz/

提前感谢您的帮助!

2 个答案:

答案 0 :(得分:1)

由于动画渐变目前是不可能的 - 使用透明色停止'黑客'。

使div与

background-color: black; background-image: linear-gradient(transparent, red);

并使用悬停样式

background-color: blue;

在正常状态下会出现黑/红色渐变,在悬停状态下会出现蓝/红色渐变。它可以转换或动画。

答案 1 :(得分:0)

此时仍无法制作渐变动画。你必须选择纯色或背景图像。