更改所有元素的不透明度,除了悬停的元素
我想知道是否有一种方法可以降低所有li"的不透明度(悬停时)除了我实际悬停的那个?类似于这张图片的东西:
I wonder if there is a way to lower opacity (on hover) to all of the 'li's' except the one I'm actually hovering? Something similar to this picture:
.main-navigation {
margin: 0;
padding: 20px 0px 25px;
list-style: none;
background-color: #ffffff;
text-align: center;
display:block;
font-size:1.1em;
}
.main-navigation li.hvr a.lvl1:link,
.main-navigation li.hvr a.lvl1:visited
{
display: block;
padding: 5px 2px 5px 3px;
color: #000;
text-decoration: none;
text-align:center;
}
.main-navigation li.hvr a.lvl1.active {
background: #eeeeee;
color:#000000;
}
.main-navigation li.hvr a.lvl1:hover
{
background-color: #E6E6E6;
color:#666666;
}
.main-navigation li.hvr {
float: left;
position: relative;
width:191px;
margin:0;
font-family: 'Open Sans', sans-serif;
}
.main-navigation li.hvr:hover {
background-color: #E6E6E6;
}
.main-navigation ul {
display: none;
position: absolute;
top:100%;
left: 0;
z-index: 9999;
background-color: #777;
margin: 0;
padding: 0;
min-width:100%;
text-align:left;
}
.main-navigation li.hvr:hover ul { display: block; }
.main-navigation li.hvr ul li {
margin: 0;
padding: 0;
list-style: none;
}
.main-navigation li.hvr ul li a:link,
.main-navigation li.hvr ul li a:visited
{
display: block;
padding: 5px 20px;
color: #fff;
text-align: center;
}
.main-navigation li.hvr ul li a:hover,
.main-navigation li.hvr ul li a:active
{
display: block;
padding: 5px 20px;
color: #fff;
background-color:#cccccc;
}
<ul class="main-navigation clearfix">
<li class="hvr ">
<a class="lvl1 active" href="">Title 1</a>
<ul>
<li><a href="">Sub title 1</a></li>
<li><a href="">Sub title 2</a></li>
<li><a href="">Sub title 3</a></li>
</ul>
</li>
<li class="hvr ">
<a class="lvl1" href="">Title 2</a>
<ul>
<li><a href="">Sub title 1</a></li>
<li><a href="">Sub title 2</a></li>
<li><a href="">Sub title 3</a></li>
</ul>
</li>
<li class="hvr ">
<a class="lvl1" href="">Title 3</a>
<ul>
<li><a href="">Sub title 1</a></li>
<li><a href="">Sub title 2</a></li>
<li><a href="">Sub title 3</a></li>
</ul>
</li>
<li class="hvr ">
<a class="lvl1" href="">Title 4</a>
<ul>
<li><a href="">Sub title 1</a></li>
<li><a href="">Sub title 2</a></li>
<li><a href="">Sub title 3</a></li>
</ul>
</li>
</ul>
推荐答案
你使用 CSS 降低了所有元素的不透明度,除了悬停的元素.
You lower the opacity of all alements except the hovered one with CSS.
重点是在父元素(ul
)悬停时降低所有<li>
元素的不透明度,并在悬停<像这样的code>li元素:
The point is to lower the opacity of all <li>
elements when the parent (ul
) is hovered and to reset the opacity to 1 on the hovered li
element like this :
ul:hover li { opacity:0.5; }
ul li:hover { opacity:1; }
这是一个简单的演示:
li{
float:left;
width:33.33%;
line-height:50px;
background:grey;
list-style-type:none;
}
ul:hover li{
opacity:0.5;
}
ul li:hover{
opacity:1;
}
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
相关文章