javascript - 将鼠标悬停在元素 A 上，用淡出动画更改元素 B 的样式？

Question

当我将鼠标悬停在 A 上时，是否可以使用淡出动画更改 B 的样式？ 如:

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

当我将光标移动到 A 时，我想在 2 秒内将 B 的颜色从白色淡出到红色？

我读了this ，效果很好，但是悬停事件发生时没有动画。

Answer 1

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

http://jsfiddle.net/r3hwn/