如何在菜单项处于活动状态时更改菜单图像的不透明度

Question

所有菜单项的不透明度均为0.4。我想要的是将图像的不透明度更改为0.8 onClick。即使在悬停时，活动图像也应保持不透明度。我正在使用CSS。任何人都可以帮忙吗？我更喜欢CSS解决方案。

＆＃13;

＆＃13;

#menu-bar {
  width: 50%;
  height: 99.9%;
  background-color: #1c333a;
  background-size: cover;
  float: left;
}

nav,
nav:before,
nav:after {
  box-sizing: border-box;
}

nav {
  margin-left: 45%;
  top: 0;
  left: 0;
  background: transparent;
}

nav ul {
  text-align: center;
}

nav ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 70px;
  height: 70px;
  background-color: #7c5eab;
  text-transform: uppercase;
  transition: all .4s ease-out;
}

nav ul li a {
  position: relative;
}

#menu-img {
  width: 80%;
  max-width: 52px;
  height: auto;
  opacity: .4;
  transition: transform .4s ease-in-out;
  -webkit-transform: -webkit-transform .4s ease-in-out;
}

#menu-img:hover {
  opacity: .8;
  width: 83%;
  max-width: 58px;
}

#menu-img .active {
  opacity: .8;
  width: 83%;
  max-width: 58px
}

＆＃13;

<div id="menu-bar">
  <nav>
    <ul>
      <li>
        <a href="#">
          <img src="https://cdn4.iconfinder.com/data/icons/user-interface-33/80/Home-512.png" id="menu-img" class="active" />
        </a>
      </li>
      <li>
        <a href="#">
          <img src="https://cdn4.iconfinder.com/data/icons/user-interface-33/80/Home-512.png" id="menu-img" class="active" />
        </a>
      </li>
      <li>
        <a href="#">
          <img src="https://cdn4.iconfinder.com/data/icons/user-interface-33/80/Home-512.png" id="menu-img" class="active" />
        </a>
      </li>
    </ul>
  </nav>
</div>

＆＃13;

＆＃13;

＆＃13;

这里是小提琴：https://jsfiddle.net/cernray/703qh8vv/3/

Answer 1

HTML代码无效，您不能拥有具有相同ID的多个图片。将此交换为类名。

当点击链接（包围你的img）时，使用a：focus伪类来指定属性。

＆＃13;

＆＃13;

#menu-bar{
	width:50%;
	height:99.9%;
	background-color:#1c333a;
	background-size: cover;
	float: left;
}	
		
nav,nav:before,nav:after {
	box-sizing: border-box;
}
nav {
	margin-left: 45%;
	top: 0;
  	left: 0;
	background: transparent;
}
nav ul {
	text-align: center;
}
nav ul li {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
  	width: 70px;
  	height: 70px;
	background-color:#7c5eab;
	text-transform: uppercase;
	transition:all .4s ease-out;
}
nav ul li a { position: relative; 
}

.menu-img{
	width: 80%;
	max-width: 52px;
	height: auto;
	opacity: .4;
	transition: transform .4s ease-in-out;
	-webkit-transform:-webkit-transform .4s ease-in-out;
}
.menu-img:hover{
	opacity: .8;
	width: 83%;
	max-width: 58px;
}

a:focus .menu-img  {
  opacity: .1;
	width: 83%;
	max-width: 58px
}

＆＃13;

<div id="menu-bar">
				<nav>
						<ul>
								<li>
							    	<a href="#" >
							    		<img src="https://cdn4.iconfinder.com/data/icons/user-interface-33/80/Home-512.png" class="active menu-img" />
							    	</a>
								</li>
								<li >
									<a href="#" >
							    		<img src="https://cdn4.iconfinder.com/data/icons/user-interface-33/80/Home-512.png" class="active menu-img" />
							    	</a>
							    </li>
							    <li >
							    	<a href="#">
							      		<img src="https://cdn4.iconfinder.com/data/icons/user-interface-33/80/Home-512.png" class="active menu-img"  />
							      	</a>
							    </li>	  
						</ul>
					</nav>
					
		</div>

＆＃13;

＆＃13;

＆＃13;