我使用下面提到的代码来产生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>
答案 0 :(得分: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;
}
答案 1 :(得分:0)
翻转是CSS中的二进制状态,一个元素正在悬停或不是。您需要使用JavaScript来完成您想要的任务。
答案 2 :(得分:0)
@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>
请在评论中查看您应该放在哪一行以使其与图像一起使用。