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

作者佚名技术来源 CSS技术浏览发布时间 2012-02-02

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

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

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

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

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

1
2
3

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

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

1
2
3

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

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

实例

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

<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>

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

1 2 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: css复合选择器:使用css的类名交集复合选择器下一篇: IEMobile将条件注释功能带入WP7手机浏览器

关于CSS网页制作实例:有条件的添加hover样式的所有评论

随机推荐