css - 更改应触发操作的 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 内)悬停以更改元素的背景颜色。

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

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

Answer 1

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

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

HTML 代码:

标签

input type="radio"或 input type="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 对问题帖子的评论以了解有关背景 div 的更多信息)或仅检查 JS fiddle 代码以了解我的意思。 因此，当您单击标签时，您将触发位于网站另一侧的单选按钮，动画将正常工作!

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