CSS hover选择器设置后无显示效果 前端学习问题求助

你的hover效果不生效是因为CSS选择器逻辑和实际HTML结构不匹配：#nft:hover #view属于后代选择器，仅能匹配#nft元素内部嵌套的#view元素，但你代码里两个<img>是同级兄弟元素，不存在嵌套关系，所以选择器无法命中目标，透明度修改不会生效。
另外你给#view设置了绝对定位，但没有给父容器设置相对定位，会导致#view的定位基准是整个页面视口，无法正确叠加在NFT图片上方。

修正后代码 #

CSS部分：

/* 给父容器加相对定位，作为内部绝对定位元素的基准 */
.nft-img {
  position: relative;
  width: 300px;
  border-radius: 7px;
  cursor: pointer;
}

#nft {
  width: 100%;
  border-radius: 7px;
  /* 消除图片下方默认空白间隙 */
  display: block;
}

#view {
  position: absolute;
  /* 让图标居中显示在NFT图片上方 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  width: 150px;
  /* 可选：加过渡动画让效果更流畅 */
  transition: opacity 0.3s ease;
}

/* 改为父容器hover时触发view的透明度修改 */
.nft-img:hover #view {
  opacity: 1;
}

HTML部分无需修改，保持原有结构即可：

<div class="nft-img">
  <img id="view" src="./images/icon-view.svg" alt="">
  <img id="nft" src="./images/image-equilibrium.jpg" alt="">
</div>

内容的提问来源于stack exchange，提问作者merkezci