Наведите курсор на элемент A, измените стиль элемента B с помощью анимации затухания?

Question

Наведите курсор на элемент A, измените стиль элемента B с помощью анимации затухания?

0

Возможно ли, когда я нахожусь на 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>

Я хочу, чтобы затухать цвет B от белого до красного за 2 секунды, когда я перемещаю курсор на A?

Я читал это, он работает хорошо, но нет анимации, когда произошло событие зависания.

Vigor 18 фев. 2014, в 16:45

Источник

Теги:

javascript

html

css

4 ответа

1

Перемещение CSS: LINK

Например:

#A {
   transition: 2s background ease;
}

Mihey Egoroff 18 фев. 2014, в 12:38

1

Привет, я обновил скрипку, о которой упоминается в примере, который вы дали. http://jsfiddle.net/u7tYE/3461/

Добавлены переходы к нему

transition: background 2s ease;

V31 18 фев. 2014, в 12:29

-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');
}

DrRoach 18 фев. 2014, в 13:18

Ещё вопросы

CeejeeB · Accepted Answer · 2014-02-18T12-54-00.000Z

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

http://jsfiddle.net/r3hwn/