在懸停div時改變body bgcolor，僅使用CSS

我希望當我懸停一個元素（用css製作的一個框）時，身體的background color從一種顏色變爲另一種顏色，例如白色變爲紅色。問題是，這應該只使用CSS而不是JavaScript。如果必須使用javascript，那麼在鼠標移出時顏色應該變回前一個。在懸停div時改變body bgcolor，僅使用CSS

---------------編輯---------------

其實我是想這樣的：

body{backgroung: #000;} 
#div{some properties} 
body #div:hover{background: #fff;}

來源

2012-12-26 sdnr1

只是告訴我們你嘗試過什麼到目前爲止..甚至是錯誤的。我希望你在問之前嘗試了一些東西。 –

這隻能通過做[** ** CSS（http://stackoverflow.com/q/1014861/1577396），但它不是[** **推薦（http://css-tricks.com /父母選擇器功能於CSS /）。 –

純CSS實驗：

http://jsfiddle.net/Tymek/yrKRX/

HTML

<div id="trigger"></div> 
<div id="bg"></div>

CSS

body { 
    height: 100%; 
} 

#bg { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    widht: 100%; 
    height: 100%; 
    z-index: 1; 
    background: #EEE; 
} 

#trigger { 
    position: absolute; 
    width: 200px; 
    height: 136px; 
    top: 50%; 
    left: 50%; 
    margin: -68px 0 0 -100px; 
    background: #333; 
    z-index: 2; 
} 

/* KEY */ 
#trigger:hover ~ #bg { 
    background: #EE0; 
}

來源

2012-12-26 11:31:39 Tymek

謝謝你的回覆。這個CSS腳本的作品！其實我需要一個沒有任何JavaScript的，你didi它。 – sdnr1

不客氣=] – Tymek

@Tymek很好的解決！ – VJS

請使用類似這樣的

<html> 
    <body> 

    <style type="text/css"> 

     .top{ 
      background:red; 
     } 

     .top2{ 
      background:white; 
     } 
    </style> 

    <div class="top" onmouseover="this.className='top2'" 
        onmouseout="this.className='top'">Here</div> 
    </body> 
</html>

來源

2012-12-26 11:19:17 Sky5005e

身體的背景顏色應該改變，而不是該分區上必須懸停改變它。 – sdnr1

您可以使用您想要的元素而不是div。 – Sky5005e

使用:hover選擇。除非你做了非常不同的事情，否則它看起來很直接。

參考

檢查下面的例子：

.classname { 
    background-color:white; 
} 

.classname:hover { 
    background-color:red; 
}

來源

2012-12-26 11:23:38 VJS

身體的背景顏色應該改變，而不是必須懸停來改變它的那個div。 – sdnr1

看到你編輯的問題後@Tymek的答案是最好的解決方案。請將其標記爲正確的答案。 – VJS

Working fiddle

你有很多錯字在你的代碼，如拼寫錯誤background爲backgroung和治療div作爲ID（#div）。

CSS（與解釋錯別字）

body{background: #000;}    /*backgroung (mis-spelled)*/ 
div{width:100px;      /*#div (treated as ID)*/ 
    height:100px; 
    border:1px solid black;}

到父標籤將鼠標懸停在您必須強制使用JavaScript或jQuery的。你可能會懷疑爲什麼沒有CSS屬性來選擇父標籤，如果是的話，那麼你可以通過這個interesting link。爲避免大多數情況下的父選擇器概念，我們可以避免使用CSS中的定位（檢查Tymek的解決方案）。

jQuery的

$(document).ready(function(){ 
    $("div").hover(function(){ 
     $(this).parent(this).css('background-color','red'); 
    }); 

    $("div").mouseleave(function(){ 
     $(this).parent(this).css('background-color','white'); 
    }); 
});

假設你是新來的jQuery，給一個鏈接在HTML的標籤head，像下面作出上述功能的工作。

<script src="http://code.jquery.com/jquery-latest.min.js" 
    type="text/javascript"></script>

入住這Working fiddle

來源

2012-12-26 11:32:17

沒有JavaScript，只是CSS。 –

@Zachdev我知道如何使用[** CSS **]（http://stackoverflow.com/q/1014861/1577396），但它不是[**推薦**]（http：// css-tricks的.com /父選擇器功能於CSS /）。順便說一句，不要只讀標題，也請閱讀帖子。 –

在懸停div時改變body bgcolor，僅使用CSS

回答

相關問題