CSS3 переходы

Question

Я хочу изменить цвет фона страницы при наведении курсора на кнопку / тег div, используя только переходы CSS3. Я хочу, чтобы цвет появлялся постепенно и, следовательно, хотел бы использовать эффект перехода, но я не знаю, как связать цвет фона страницы с событием наведения на элементе div. Может кто-нибудь помочь мне с моим кодом? Спасибо

Answer 1

В настоящее время это невозможно в CSS3.

В будущем ( CSS4? ) вы сможете сделать это следующим образом:

body {
    background-color: red;
    transition: background-color 1s ease;
}

$body #theButton:hover {
    background-color: green;
}

Обратите внимание на $ во втором селекторе;Указывает, к какому элементу относится блок CSS.К сожалению, пока нет ни одной реализации этого, поэтому вам придется прибегнуть к Javascript (который, я полагаю, вы знаете, как это сделать. Если нет, просто спросите).

---

Обновление (с использованием jQuery) :

CSS:

​body {
    background: red;
    transition: background-color 1s ease;
}
body.hover {
    background: green;
}

Javascript:

​$('#theButton').hover(function(){
    $('body').addClass('hover');
}, function(){
    $('body').removeClass('hover');
});​​​​​​​​

Вот скрипка: http://jsfiddle.net/mWY88/1/

---

Для максимальной эффективности вы должны кешировать свои селекторы.

Answer 2

Фактически, вы можете очень легко изменить цвет фона тела с помощью анимации перехода CSS3, например Я делаю это здесь Я получил логику от здесь .