在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悬停更改图像背景

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

Answer 2

过渡状态是CSS中的二进制状态，元素是否已悬停或未悬停。 您将需要使用JavaScript进行所需的操作。

Answer 3

@FranzThüs说的是正确的，您必须对3e图像使用Javascript。 @ Med7at所说的也是尝试使用一个div并通过:hover更改图像

这应该为您工作。

我使用id而不是class因此这些图像只会更改一项。

我使用颜色，以便您可以看到不同之处。

 var mouseOut = document.getElementById("mainimg"); mouseOut.onmouseout = function() { this.style.backgroundColor = "orange"; //this.style.background = "url(3.jpg)" } 

 #mainimg{ background:blue; /*background-image:url(1.jpg);*/ height: 300px; width: 300px; transition: 1s; } #mainimg:hover{ background:red; /*background-image:url(2.jpg);*/ background-size:500px 500px; /* this will make the 3 img look missplaced for 1 second. } 

 <div id="mainimg"></div> 

查看注释，您应该在该行中添加些内容以使其与图像配合使用。