將鼠標懸停在另一個div上時更改另一個div背景

嘗試在將鼠標懸停在另一個div上時更改div背景顏色。但我無法讓它工作。現在一直在尋找她，但找不到類似的問題。將鼠標懸停在另一個div上時更改另一個div背景

<style type="text/css"> 
    #main { 
     width: 960px; 
     height: 600px; 
     margin: auto; 
     position: relative; 
     background: red; 
    } 

    #trykk { 
     width: 100px; 
     height: 100px; 
     background-color: yellow; 
    } 

    #trykk:hover #main { 
     background-color: green; 
    } 
</style> 

<div id="main"> 
    <div id="trykk"> 
    </div> 
</div>

這就是我一直在使用的代碼。唯一的問題是我不允許使用JavaScript。那麼當我將鼠標懸停在div #trykk上時，是否有任何方法可以更改div #main上的背景顏色？

來源

2012-11-12 user1770961

，與Rodik's答案，他說用一個孩子，因此你不能改變父元素的風格，你不能改變選擇父母的演示，但如果你想你可以改變你的標記，就像你說的，你不能使用JavaScript，但如果你可以改變比它就會像這樣

Demo1

HTML標記

<div id="main">Main</div> 
<div id="trykk">Trykk</div>

CSS

#main:hover + #trykk { 
    background-color: green; 
}

或者，如果你要嵌套的div的，你正在做的事情，只是改變這樣

Demo2

HTML選擇

<div id="main">Main 
<div id="trykk">Trykk</div> 
</div>

CSS

#main:hover > #trykk { 
    background-color: green; 
}

來源

2012-11-12 12:06:50

這些例子改變#trykk的背景顏色，但問題請求＃主背景改變顏色 –

@DannyHearnah你剛剛看到的例子，甚至讀我的答案？我已經指出，在我的回答 –

啊，所以我只能得到這個工作，如果使用JavaScript？ – user1770961

CSS選擇僅適用於父母之間的一種方式。

因此，孩子的狀態不會影響其父母的狀態。

A javascript mouseover事件將需要實現這種類型的功能。

來源

2012-11-12 12:01:44 Rodik

使用jQuery你可以這樣做：

$(function(){ 
    $("#trykk").hover(function(){ 
     $("#main").toggleClass("greenBackground"); 
    }); 
});

來源

2012-11-12 12:01:56 ThomasK

**唯一的問題是我沒有被允許使用javascript。**你看過嗎？ –

將鼠標懸停在另一個div上時更改另一個div背景

回答

相關問題