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

当我将鼠标悬停在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>

diva
随机其他元素
随机其他元素
随机其他元素
B组

当我将光标移动到A时，我想在2秒钟内将B的颜色从白色变为红色

我读到，它工作得很好，但在发生悬停事件时没有动画。

CSS transtition:

例如：

#A {
   transition: 2s background ease;
}

---

您好，我已经更新了您给出的示例中提到的小提琴

添加了过渡到它

transition: background 2s ease;

---

这里有两个选项，选项1、CSS或选项2 jQuery

备选案文1：

#A {
    transition:all 2s;
}

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

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

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