更改除悬停元素外的所有元素的不透明度 [英] Change opacity on all elements except hovered one

问题描述

我想知道是否有一种方法可以降低(悬停"时)所有"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>

这篇关于更改除悬停元素外的所有元素的不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！