鼠标悬停时如何使图像淡入？答案

【问题标题】：How to get an image to fade in when the mouse is hovered over?鼠标悬停时如何使图像淡入？
【发布时间】：2017-05-04 03:42:28
【问题描述】：

我收到了这条提示：

.container img{
     width:125px;
     margin;0;
     padding:0;
     opacity:0.5;
}
.container img:hover{
   opacity:1;
}

试过了，效果很好！

然后我使用了一个轻量版的自定义 CSS 编辑器插件 - 将代码弹出到其中并将类容器 <p class="container"> 添加到图像中，它就可以工作了。

【问题讨论】：

【解决方案1】：

您可以为图像使用 opacity 属性：

.container img{
  width:300px;
  margin;0;
  padding:0;
  opacity:0.5;
}
.container img:hover{
  opacity:1;
}

<div class="container">
  <img src="http://www.booths.co.uk/wp-content/uploads/640px-X-360px-Chocolate-MiniNests.jpg"/>
</div>

【讨论】：