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

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

#菜单栏{
宽度：50%；
身高：99.9%；
背景色：#1c333a；
背景尺寸：封面；
浮动：左；
}
导航，
导航：之前，
导航：之后{
框大小：边框框；
}
导航{
左边缘：45%；
排名：0；
左：0；
背景：透明；
}
导航ul{
文本对齐：居中；
}
李国荣{
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
宽度：70px；
高度：70像素；
背景色：#7c5eab；
文本转换：大写；
过渡：全部。4放松；
}
海军ulli a{
位置：相对位置；
}
#菜单img{
宽度：80%；
最大宽度：52px；
高度：自动；
不透明度：.4；
转换：转换。4s轻松输入输出；
-webkit转换：-webkit转换。4s轻松输入输出；
}
#菜单img：悬停{
不透明度：.8；
宽度：83%；
最大宽度：58px；
}
#菜单img.active{
不透明度：.8；
宽度：83%；
最大宽度：58px
}

HTML代码无效，不能有多个具有相同ID的图像。请将其交换为类名

单击链接（围绕img）时，使用a:focus伪类分配属性

#菜单栏{
宽度：50%；
身高：99.9%；
背景色：#1c333a；
背景尺寸：封面；
浮动：左；
}	
导航，导航：之前，导航：之后{
框大小：边框框；
}
导航{
左边缘：45%；
排名：0；
左：0；
背景：透明；
}
导航ul{
文本对齐：居中；
}
李国荣{
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
宽度：70px；
高度：70像素；
背景色：#7c5eab；
文本转换：大写；
过渡：全部。4放松；
}
导航位置：相对位置；
}
.菜单img{
宽度：80%；
最大宽度：52px；
高度：自动；
不透明度：.4；
转换：转换。4s轻松输入输出；
-webkit转换：-webkit转换。4s轻松输入输出；
}
.菜单img：悬停{
不透明度：.8；
宽度：83%；
最大宽度：58px；
}
a:焦点。菜单图像{
不透明度：.1；
宽度：83%；
最大宽度：58px
}

onClick

是一个javascript事件。因此，如果您想使用

onClick

事件完成某些操作，您确实需要Javascript。问题是，当我在菜单项外单击时，效果会消失。这就是焦点所在的位置-当您单击另一个元素时，上一个元素会失去焦点。对于需要通过JSF更改类的持久更改，请提供可用的JS代码？提前谢谢。