更改所有元素的不透明度，除了悬停的元素

Posted 2023-05-08

【中文标题】更改所有元素的不透明度，除了悬停的元素

【英文标题】：Change opacity on all elements except hovered one

【发布时间】：2014-12-19 01:59:27

【问题描述】：

我想知道是否有一种方法可以降低所有“li”的不透明度（悬停时）除了我实际悬停的那个？类似于这张图片的东西：

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

【参考方案1】：

您使用 CSS 降低了所有元素的不透明度，除了悬停的元素。

关键是在父元素 (ul) 悬停时降低所有 <li> 元素的不透明度，并将悬停的 li 元素的不透明度重置为 1，如下所示：

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>

【讨论】：

@user3507631 很高兴我能帮上忙 :)