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代码：

标签

输入类型=＆＃34;无线电＆＃34;或输入类型=＆＃34;复选框＆＃34;

此解决方案也可以使其成为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小提琴代码以了解我的意思。因此，当您点击标签时，您将触发位于网站另一侧的单选按钮，动画将正常工作！

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

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

1 个答案: