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

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

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

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

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

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

          #all > ul {
                list-style: none;
                float: left; width: 200px;
                padding: 0 10px 0 0;
            }
            #all a {
                        text-decoration: none;
                        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 {
                        opacity: 0.5;
            }
            #all:hover ul:hover a:hover {
                        opacity: 1;
            }