更改应触发操作的 div 的父 div 之外的 div 的颜色

Question

请先检查这个以了解问题： http://jsfiddle.net/830b4rLw/3/

HTML:

<div id="nav">
<div id="box1"></div>
<div id="box2"></div>
</div>
<div id="header"></div>

CSS:

body {
    background-color: #606;
}

#nav {
    background-color: #f00;
    height: 50px;
    width: 100%;
}

#header {
    height: 300px;
    width: 100%;
    background-color: #00f;
}

#box1 {
    height: 30px;
    width: 20px;
    float: left;
    background-color: #0f0;
}

#box2 {
    height: 30px;
    width: 50px;
    background-color: #000;
    float: left;
    margin-left: 5px;
}

@keyframes a {
    0%{}
    100% {background-color: #fff;}
    }

#box1:hover + #box2{
        animation: a 2s;
        animation-fill-mode: forwards;
}

当您将鼠标悬停在 box1（绿色框）上时，在链接的 jsfiddle 上，box2 会更改其颜色。

现在我要做的是；

第一种情况：当您悬停box1时，我想更改#header（蓝色框）的背景颜色。

第二种情况，我想在悬停#box1 时更改正文背景（在本例中当前为紫色）颜色。

所以我在这里要问的是，我想要更改 div 的背景颜色，该 div 不相邻且不共享同一父项。在第二种情况下，我想将 div（位于另一个 div 内）悬停以更改元素的背景颜色。

请阅读：我不想使用任何 javascript!

感谢大家的回复，非常欢迎提供有关此部分的任何其他信息和提示！

Answer 1

为了回答我自己的问题，这里是解决方案：

您可以使用标签输入技术。

HTML 代码：

标签

输入类型="radio" 或输入类型="checkbox"

此解决方案还使其成为 onclick 而不是悬停，因此您无需使用 JavaScript onclick 函数，它的双重问题解决器。

http://jsfiddle.net/69m1mmmk/1/

所以标签，我们点击并修改成我们想要的样子的东西在导航中：

<div id="nav">
<label class="color-box" id="color-box1" for="color-box-input1"></label>
<label class="color-box" id="color-box2" for="color-box-input2"></label>
</div>

但是单选按钮是隐藏的，并且它们与背景 div 在同一个父级 div 中。（阅读@CBroe 对问题 post 的评论以了解有关背景 div 的更多信息）或仅检查 JS fiddle 代码以了解我的意思。因此，当您单击标签时，您将触发位于网站另一侧的单选按钮，动画将正常工作！

#color-box-input2:checked ~ #choose-color-bg {
animation: color2 2s;
animation-fill-mode: forwards;
}

更改应触发操作的 div 的父 div 之外的 div 的颜色

Changing color of the div that is outside parent div of the div that should trigger action

css

css-selectors

css-animations