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

发布 : 2015-10-12 分类 : WEB 浏览 :

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

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

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

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

1
2
3
<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一样了。

在线演示

演示地址

本文作者 : Richex
原文链接 : https://blog.richex.cn/381.html
版权声明 : 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!

欢迎打赏

微信扫一扫, 向我投食

微信扫一扫, 向我投食

支付宝扫一扫, 向我投食

支付宝扫一扫, 向我投食

留下足迹