html - 将鼠标悬停在另一个 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，但如果可以更改标记比它会像这样

演示1

HTML

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

CSS

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

或者，如果您想像现在一样嵌套您的 div，只需像这样更改选择器

演示2

HTML

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

CSS

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

Answer 2

CSS 选择只能以一种方式工作，从父级到子级。

因此，孩子的状态不能影响其父母的状态。

实现此类功能需要一个javascript mouseover事件。

Answer 3

使用 jquery 你可以这样做：

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