我想知道是否只有当 :hover 仅在 html/css 语言中处于事件状态时才能在导航栏上显示 img。
当我 :hover 时，我试图在我的导航栏下显示这个灯 navbar
这是我的 html 代码:codeHtml
这是我的CSS:css for the img positioning
1 个问题我可以不用 JS 来做这个吗？ (通过只玩不透明度)。因为我试过了
ul li a img{opacity: 0;}
ul li a img:hover{opacity:1;}
它没有用。
2 我可以再次对 css 中具有不同值的其他导航栏元素使用相同的 img 来更改位置，也许使用不同的类？并仅更改大小和 x 值？如果是，是绝对值还是相对值？
谢谢大家的回答，祝大家有美好的一天
最佳答案
只有看到所有的代码我才能给出一个直接的答案。但是，尝试这段代码:
<ul>
<li><a href="dsad">Home<img src="https://upload.wikimedia.org/wikipedia/en/thumb/6/63/IMG_%28business%29.svg/1200px-IMG_%28business%29.svg.png"></a></li>
<li>teste</li>
<li>outro</li>
<li>Ultimo</li>
</ul>
<style>
ul li a img:hover{opacity: 1;}
ul li a img{opacity: 0;}
</style>
它有效...
你想把图像放在一个绝对位置，考虑到他 parent (li) 的位置对吗？如果是这样，我不会将 (li) 设置为 position:relative 而将 img 设置为绝对？这样，img 的绝对位置将通过他的父级 (li) 而不是整个文档。
在您发布的 CSS 中，不透明度为 0.9。所以很可能是这个原因。尝试把不透明度:0;在另一行中 - ul li:hover img{opacity:1 !important}
关于问题 2，当然。但也许可以考虑为每个导航栏设置一个类名
关于HTML - 仅在 :hover state of a navbar 中显示 img，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53778600/