Question

我无法在悬停时显示图像。如果我将div:hover velmaStandingImg{opacity: 1}放在整个div上，则可以使用。

#velmaStandingImg {
  position: absolute;
  width: 120px;
  top: 500px;
  left: 150px;
  opacity: 0;
}

#velmaStandingImg:hover {
  opacity: 1;
}

<div id="container">
  <img id="runningDooImg" src="http://dummyimage.com/100&text=scoob__anim.gif" alt="Scooby Doo Running">
  <img id="velmaGlassesImg" src="http://dummyimage.com/100&text=blind_without_em.png" alt="Velma">
  <img id="velmaStandingImg" src="http://dummyimage.com/100&text=Velma_Dinkley.png" alt="Velma">
  <img id="bigMonsterImg" src="http://dummyimage.com/100&text=58a8f1.png" alt="Monster">
  <img id="ghostImg" src="http://dummyimage.com/100&text=959911.png" alt="Monster">
</div>

Answer 1

问题不在于opacity本身。它应该可以按照您的方式正常工作。

存在定位问题，考虑到您已将其设置为container，这使得图像停留在top: 500px上方。只需移除此absolute位置，它就会按预期工作。

#velmaStandingImg {
  opacity: 0;
}

#velmaStandingImg:hover {
  opacity: 1;
}

<div id="container">
    <img id="runningDooImg" src="http://dummyimage.com/100&text=scoob__anim.gif" alt="Scooby Doo Running">
    <img id="velmaGlassesImg" src="http://dummyimage.com/100&text=blind_without_em.png" alt="Velma">
    <img id="velmaStandingImg" src="http://dummyimage.com/100&text=Velma_Dinkley.png" alt="Velma">
    <img id="bigMonsterImg" src="http://dummyimage.com/100&text=58a8f1.png" alt="Monster">
    <img id="ghostImg" src="http://dummyimage.com/100&text=959911.png" alt="Monster">
</div>

如果运行上面的代码段，则将opacity悬停在中间的图像时，将按预期工作。

将鼠标悬停在图像上时我不透明1

1 个答案: