change content of div with background color slowly

Question

I have a div with the following css entry

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

How can I change just its contents(text) slowly, without making the whole div disappear and then appear using fadeIn and fadeOut.

Answer 1

Use CSS3's transition:

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

once you hover it should change the color for you

http://jsfiddle.net/QBZKb/

Answer 2

You could just create another div without background color etc Within the results div. And of course present your text in the new div, which you also append the fade animations to.

Answer 3

Use a CSS3 transition.

Just change the timing (2s in this case) to fit how slow or fast you want it to change.

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

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

Alternately, you could use a CSS3 animation to do something similar, but it wouldn't really be efficient unless you wanted to add other visual changes to the div.