CSS Transition

http://stackoverflow.com/q/13054902/922168

HTML

<span class="SimpleTip" onMouseOver="javascript:this.className='SimpleTipHover';"onMouseOut="javascript:this.className='SimpleTip';">test</span>

CSS

.SimpleTip {
    background-color:green;
}
.SimpleTipHover {
    background-color:red;
}
span {
    transition-property: background;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 1s;
    /* Firefox 4 */
    -moz-transition-property:background;
    -moz-transition-duration:1s;
    -moz-transition-timing-function:linear;
    -moz-transition-delay:1s;
    /* Safari and Chrome */
    -webkit-transition-property:background;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:1s;
    /* Opera */
    -o-transition-property:background;
    -o-transition-duration:1s;
    -o-transition-timing-function:linear;
    -o-transition-delay:1s;
}

JavaScript

$('.SimpleTip').on('mouseOver', function (){ 
    $('.SimpleTipHover').fadeIn();
}