多个CSS控制同一个DIV的背景颜色

用CSS控制一个DIV的Background不难，用CSS控制CSS内的Background也不难，难就难在，同等级的CSS相互控制。

今天就遇到了这么一个问题，首先是出现了一个大概的构思：在网页内部，有多个按钮，每单击一个按钮，一个固定位置DIV的Background就改变成指定的颜色。

开始是想直接用input button的，可是为了美观，还是选择了用DIV当做Button，然后交互方式也简化了，就变成鼠标移动到Button上面就出现对于的变化。

代码也就很简单的一个大概布局

<div class="red"></div>
<div class="blue"></div>
<div class="box"></div>

鼠标移动到.red上面，.box背景变成红色，移动到.blue上面，.box颜色就变成蓝色，很简单的效果。

可是问题就出现在CSS的同级元素相互控制上面。写CSS才发现，根本就不知道应该怎么写呀，如果DIV.box在DIV.red里面，那么用.red:hover .box{*}就搞定了，可是.box并不在.red里面，而是在外面。

在度娘上参考了诸多资料，也问了许多大神，仍然没有得到想要的结果。

虽然问了很多，没有得到答案，可是却想到了另外一个办法，虽然这样从编程的角度上看来，比较浪费资源，因为我的想法是创建四个box，分别放在对于的颜色div里面，通过position改变z-index层次，虽然原理不一样，可是效果确实达成了。

其中的过程就不详细说明了，接着突然想升级一下，既然移动的时候可以改变颜色，那么为什么不能把颜色固定住呢？

然后就想起focus，可是改了半天的代码，一直没有达到效果，background颜色始终固定不住。

也问了许多大神，仍然还是没有问到结果，不过突然才发现自己真的糊涂了，focus直接用css根本没办法去设置的呀，行吧，只能说经验不足，最后效果就保持到如上的那个GIF一样了。

在线演示

演示地址