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過渡動畫（如I'm doing it here）非常輕鬆地更改主體背景顏色。我從here得到了邏輯。