《
有条件的添加CSS的hover样式》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023431R013.htm
.parent:hover > div:hover {
opacity: 1.0;
}
我们可以给所有的div元素添加下面的透明度降低的属性：
.parent:hover > div {
opacity: 0.5;
}
CSS样式：
<section>
<div></div>
<div></div>
<div></div>
</section>
鼠标悬停后果很有用途，如何有前提的增加这个央视呢？我们来看一下，给元素增添一个hover款式，很简略，咱们来看一个透明度的例子吧：
而后我们再特殊处置那个真正hover了的div：
div {
opacity: 1.0;
}
div:hover {
opacity: 0.5;
}
--> [
网站建设之]有条件的添加CSS的hover样式
实例
这个主意能够扩大到良多处所，这里是一个列表的例子，当你鼠标进入列表的时候，其余列的透明度下降，本列中也一样，只不外透明度有层层增添，视觉效果很不错。代码是这样的：
然而如果我们只是想让当前真正hover了的div显示，而让其余的div含混呢？
假设我们的HTML构造如下：
Tag：CSS hover样式 CSS hover样式
#all > ul {
list-style: none;
float: left; width: 200px;
padding: 0 10px 0 0;
}
#all a {
text-decoration: none;
,有效提高网站PR的三个方法; display: block;
padding: 10px;
background: #900;
border-radius: 20px;
color: white;
text-align: center;
margin: 0 0 5px 0;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
,有关新手站长建站的五大技巧; }
#all:hover a {
opacity: 0.2;
}
#all:hover ul:hover a {
,最新可以隐藏超链接的CSS代码：expression; opacity: 0.5;
}
#all:hover ul:hover a:hover {
,最全的CSS浏览器兼容问题; opacity: 1;
}
<div id="all">
<ul>,更简洁的CSS清理浮动方式;
<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>
留神
谁在用呢？
某敏感推在他们For Mac的程序中使用了相干的技巧，效果仍是不错的：
这个小技能，老式的阅读器是不支撑的，由于他们只有对a标签的hover特征，假如也想实现相应的效果，那么就要应用js来检测鼠标进入的事件了。
(责任编辑：网站建设)
有条件的添加CSS的hover样式相关文章