用背景颜色慢慢改变div的内容答案

【问题标题】：change content of div with background color slowly用背景颜色慢慢改变div的内容
【发布时间】：2014-05-09 03:03:12
【问题描述】：

我有一个 div 带有以下 css 条目

#results { 
background: #dddada; 
color: 000000; 
cursor: pointer; 
}
#results:hover { 
background: #3d91b8; 
color: #ffffff; 
}

我怎样才能慢慢地改变它的内容（文本），而不是让整个div消失然后使用fadeIn和fadeOut出现。

【问题讨论】：

标签： jquery html callback fadein fadeout

【解决方案1】：

使用 CSS3 的过渡：

#results { 
background: #dddada; 
color: 000000; 
cursor: pointer; 
transition: color 1s ease;
transition: background 1s ease;
}
#results:hover { 
background: #3d91b8; 
color: #ffffff; 
}

一旦你将鼠标悬停，它应该会为你改变颜色

http://jsfiddle.net/QBZKb/

【讨论】：

【解决方案2】：

您可以在结果 div 中创建另一个没有背景颜色等的 div。当然，在新的 div 中显示您的文本，您还可以在其中附加淡入淡出动画。

【讨论】：

【解决方案3】：

使用 CSS3 过渡。

只需更改时间（在本例中为 2 秒）以适应您希望它改变的速度。

    #results{ 
    background: #dddada; 
    color:000000; 
    cursor:pointer; 
    transition:color 2s linear;
    transition:background 2s linear;
    }

    #results:hover{ 
    background:#3d91b8; 
    color:#ffffff; 
    }

或者，您可以使用 CSS3 动画来做类似的事情，但除非您想向 div 添加其他视觉更改，否则它不会真正有效。

【讨论】：