html - 在 CSS 中鼠标悬停和鼠标移开时更改图像

Question

我使用下面提到的代码来产生 CSS 过渡效果。div 显示第一张图片(即 1.jpg)，鼠标悬停时第二张图片(2.jpg)通过 CSS 过渡显示，当鼠标移开时第一张图片返回显示。

我需要鼠标移开时的第三张图片，请帮助我如何通过 CSS 完成此操作。
我的编码如下:

.mainimg
{
    background-image:url(1.jpg);
    height: 300px;
    width: 300px;
    transition: 1s;
}
.img2
{
    background-image:url(2.jpg);
    background-size:500px 500px;
    width:0px;
    height:300px;
    transition:1s
}
.mainimg:hover .img2
{
    width:300px;
    transition:1s;
}   

<div class="mainimg">

<div class="img2"></div>
 </div>

Answer 1

试试这个:使用相同的 div 来包含图像

<div class="mainimg">

并使用css hover改变图片背景

.mainimg {
  background-image:url(1.jpg);
  height: 300px;
  width: 300px;
  transition: 1s;
}
.mainimg:hover {
  background-image:url(2.jpg);
  transition: 1s;
}