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

Question

當鼠標懸停在另一個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的背景顏色？

Answer 1

一個與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;
}

Answer 2

從父級到子級，CSS選擇僅以一種方式起作用。

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

需要javascript鼠標懸停事件來實現此類功能。

Answer 3

使用jquery你可以這樣做：

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