Question

我有一个div，其中包含以下css条目

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

如何在不使整个div消失的情况下缓慢更改其内容（文本），然后使用fadeIn和fadeOut显示。

Answer 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/

Answer 2

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

Answer 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添加其他视觉更改，否则它不会真正有效。

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

3 个答案: