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

CSS过渡：{{3p>

例如：

答案 1 :(得分：1)

您好我已经更新了您给出的示例中提到的小提琴。 http://jsfiddle.net/u7tYE/3461/

添加了转化

transition: background 2s ease;

答案 2 :(得分：1)

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

http://jsfiddle.net/r3hwn/

答案 3 :(得分：-1)

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

选项1：

#A {
    transition:all 2s;
}

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

选项2：

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

Answer 2