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所说的是正确的，你必须使用Javascript作为3e图像。还有@ 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>

请在评论中查看您应该放在哪一行以使其与图像一起使用。

鼠标悬停时更改图像并在CSS中鼠标移出

3 个答案: