html - 如何使图像仅在我将鼠标悬停在其上时出现

Question

我希望我的图像仅在我将鼠标悬停在图像上时出现，我尝试将其放入样式部分但没有成功。这个代码对吗？

<style type=“text/css”>
img{opacity: 0;}
img:hover{opacity: 1;}
</style>

Answer 1

您使用了错误类型的引号。

将 “text/css” 更改为 "text/css"。

不正确

<style type=“text/css”>
  img {
    opacity: 0;
  }

  img:hover {
    opacity: 1;
  }
</style>

正确

<style type="text/css">
  img {
    opacity: 0;
  }

  img:hover {
    opacity: 1;
  }
</style>