CSS教程之CSS网页制造实例:有前提的增加hover款式

声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。
破洛洛文章简介：CSS网页制造实例:有前提的增加hover款式.
给元素增加一个hover款式，很复杂，我们来看一个通明度的例子吧：

1. 123456

复制代码

1. div{opacity:1.0;}div:hover{opacity:0.5;}

复制代码

可是假如我们只是想让以后真正hover了的div显现，而让其他的div含混呢？
假定我们的HTML布局以下：

1. 12345

复制代码

1. <section><div></div><div></div><div></div></section>

复制代码

我们能够给一切的div元素增加上面的通明度下降的属性：

1. 123

复制代码

1. .parent:hover>div{opacity:0.5;}

复制代码

然后我们再出格处置谁人真正hover了的div：

1. 123

复制代码

1. .parent:hover>div:hover{opacity:1.0;}

复制代码

谁在用呢？
某敏感推在他们ForMac的程序中利用了相干的手艺，效果仍是不错的：

登录/注册后可看大图

实例

这个设法能够扩大到良多中央，这里是一个列表的例子，当你鼠标进出列表的时分，其他列的通明度下降，本列中也一样，只不外通明度有层层增添，视觉效果很不错。代码是如许的：

1. 1234567891011121314151617181920212223242526272829

复制代码

1. <divid="all"><ul><li><ahref="#">---</a></li><li><ahref="#">---</a></li><li><ahref="#">---</a></li><li><ahref="#">---</a></li><li><ahref="#">---</a></li><li><ahref="#">---</a></li><li><ahref="#">---</a></li></ul><ul><li><ahref="#">---</a></li><li><ahref="#">---</a></li><li><ahref="#">---</a></li><li><ahref="#">---</a></li><li><ahref="#">---</a></li><li><ahref="#">---</a></li><li><ahref="#">---</a></li></ul><ul><li><ahref="#">---</a></li><li><ahref="#">---</a></li><li><ahref="#">---</a></li><li><ahref="#">---</a></li><li><ahref="#">---</a></li><li><ahref="#">---</a></li><li><ahref="#">---</a></li></ul></div>

复制代码

CSS款式：

1. div{opacity:1.0;}div:hover{opacity:0.5;}0

复制代码

1. div{opacity:1.0;}div:hover{opacity:0.5;}1

复制代码

点击这里检察Demo
注重

这个小技能，老式的扫瞄器是不撑持的，由于他们只要对a标签的hover特征，假如也想完成响应的效果，那末就要利用js来检测鼠标进进的事务了。[English]
转载请说明：
RockUX&ndash;WEB前端
出自：有前提的增加Hover款式
</p>
可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。