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

时间:2016-01-24 17:06:59

标签: html css css3

我使用下面提到的代码来产生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>

3 个答案:

答案 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>

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