将鼠标悬停在另一个 div 上时更改另一个 div 背景答案

【问题标题】：Change another div background when hover over another div将鼠标悬停在另一个 div 上时更改另一个 div 背景
【发布时间】：2012-11-12 11:51:48
【问题描述】：

尝试在将鼠标悬停在另一个 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 的背景颜色？

【问题讨论】：

标签： html css

【解决方案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;
}

【讨论】：

这些例子改变了#trykk的背景颜色，但是问题要求#main background改变颜色
@DannyHearnah 您是否刚刚看到示例，甚至阅读了我的答案？我已经在我的回答中说过了
是的，这行得通。谢谢你。我只是把两个 div 放到一个 secton 中。
如何在将鼠标悬停在#trykk 上时更改#main 背景颜色，保持与演示1 相似的层次结构。我试过这个，但不起作用。 jsfiddle.net/sBk3M/92

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

使用 jquery 你可以这样做：

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

【讨论】：

唯一的问题是我不被允许使用 javascript。你读过这个吗？