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

【问题标题】：Changing color of the div that is outside parent div of the div that should trigger action更改应该触发操作的 div 的父 div 之外的 div 的颜色
【发布时间】：2015-01-24 05:56:45
【问题描述】：

请先检查这个以了解问题： 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！

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

【问题讨论】：

这两种情况都无法使用当前的 CSS 完成，因为没有父选择器之类的东西。您需要更改 HTML 结构。
基本上我在这里要做的是，我有一个网站应该通过单击导航中的一个颜色框来更改主题颜色。这些颜色变化发生在导航之外。（导航后的元素）。您会建议更改哪种 HTML 结构？我尝试了很多，但都失败了。
除了少数例外，例如单选按钮和复选框，不能单独使用 HTML 更改状态。我建议研究一下 jQuery 库，它使这类事情变得简单。
您需要一个结构，其中您想要影响的元素是在触发元素之后处于同一级别的同级元素。（所以你可以通过在所有内容后面放置这样一个元素来“伪造”你的身体背景。）
但是@isherwood 刚才提到的构成了一个额外的问题。不过还有一件事，它甚至可以通过单击它的后代元素来更改 body 的属性——锚链接和 :target 伪类。

标签： css css-selectors css-animations

【解决方案1】：

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

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

HTML 代码：

标签

input type="radio" 或 input type="checkbox"

这个解决方案还使它成为 onclick 而不是 hover 所以你不需要使用 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 小提琴代码以理解我的意思。因此，当您单击标签时，您将触发网站另一侧的单选按钮，并且动画将正常工作！

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

【讨论】：