将鼠标悬停在另一个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");
    });
});