CSS网页制作实例:有条件的添加hover样式

武林网(www.vevb.com)文章简介：CSS网页制作实例:有条件的添加hover样式.

给元素添加一个hover样式，很简单，我们来看一个透明度的例子吧：

123456div {opacitydiv:hover {opacity

但是如果我们只是想让当前真正hover了的div显示，而让其他的div模糊呢？
假设我们的HTML结构如下：

12345<section><div></div><div></div><div></div></section>

我们可以给所有的div元素添加下面的透明度降低的属性：

123div {opacity

然后我们再特别处理那个真正hover了的div：

123div:hover {opacity

谁在用呢？
某敏感推在他们For Mac的程序中使用了相关的技术，效果还是不错的：

这个想法可以扩展到很多地方，这里是一个列表的例子，当你鼠标进入列表的时候，其余列的透明度降低，本列中也一样，只不过透明度有层层增加，视觉效果很不错。代码是这样的：

1234567891011121314151617181920212223242526272829<div id="all"><ul> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li></ul><ul> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li></ul><ul> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li> <li><a href="#">---</a></li></ul></div>

CSS样式：

12345678910111213141516171819202122232425262728a border-radius -webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transitiona {opacityul:hover a {opacityul:hover a:hover {opacity

点击这里查看Demo

这个小技巧，老式的浏览器是不支持的，因为他们只有对a标签的hover特性，如果也想实现相应的效果，那么就要使用js来检测鼠标进入的事件了。[English]

转载请注明：
作者：RockUX–WEB前端
出自：有条件的添加Hover样式