Hover on element A, change the style of element B with fade out animation?

Question

Is it possible when I hover on A, change the B's style with fade out animation? Such as:

<div id="A">Div A</div>
<div>random other elements</div>
<div>random other elements</div>
<div>random other elements</div>
<div id="B">Div B</div>

I want to fade out the B's color from white to red in 2 seconds when I move my cursor to A?

I read this, it works good but there's no animation when the hover event happened.

Answer 1

CSS transtition: LINK

For example:

#A {
   transition: 2s background ease;
}

Answer 2

Hi I have updated the fiddle which is mentioned in the example you gave. http://jsfiddle.net/u7tYE/3461/

Added transitions to it

transition: background 2s ease;

Answer 3

#B{
    background:orange;
}
#A:hover ~ #B {
    transition: background 2s ease;
    background: #fff
}

http://jsfiddle.net/r3hwn/

Answer 4

Here you have two options, option 1, CSS or option 2 jQuery.

Option 1 :

#A {
    transition:all 2s;
}

#A:hover < #B {
    color:red;
}

Option 2:

$("#A").onmouseover(function(){
    $('#B').animate({color: 'red'}, '2000');
}
$("#A").onmouseexit(function(){
    $('#B').animate({color: 'white'}, '2000');
}