html - 如何在悬停时更改图像时添加过渡效果

Question

这是我发现的使用 CSS 更改鼠标悬停时图像的最佳方法，但在添加过渡效果时遇到了问题，因此图像不会突然改变....这是我一直在研究的片段:

a img:last-child {
  display: none;
}

a:hover img:last-child {
  display: block;
}

a:hover img:first-child {
  display: none;
}

<a>
  <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png" />
  <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png" />
</a>

非常感谢任何帮助。提前致谢!

Answer 1

#cf img {
  position: absolute;
  left: 0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity: 0;
}

<div id="cf">
  <img class="bottom" src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png" />
  <img class="top" src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png" />
</div>