多个CSS控制同一个DIV的背景颜色
用CSS控制一个DIV的Background不难,用CSS控制CSS内的Background也不难,难就难在,同等级的CSS相互控制。
今天就遇到了这么一个问题,首先是出现了一个大概的构思:在网页内部,有多个按钮,每单击一个按钮,一个固定位置DIV的Background就改变成指定的颜色。
开始是想直接用input button的,可是为了美观,还是选择了用DIV当做Button,然后交互方式也简化了,就变成鼠标移动到Button上面就出现对于的变化。
代码也就很简单的一个大概布局
1 | <div class="red"></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一样了。