在 CSS 中更改鼠标悬停和鼠标移出时的图像答案

【问题标题】：Change Image on mouse hover and mouse out in CSS在 CSS 中更改鼠标悬停和鼠标移出时的图像
【发布时间】：2016-01-25 02:12:41
【问题描述】：

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

【问题讨论】：

如果只是图片（没有文字），那么一个img标签可以做：codepen.io/gc-nomade/pen/Byqepv一些示例效果，点击也可以codepen.io/gc-nomade/pen/nifaq

标签： html css

【解决方案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;
}

【讨论】：

【解决方案2】：

翻转在 CSS 中是二进制的，一个元素要么被悬停，要么没有。你需要使用 JavaScript 来做你想做的事。

【讨论】：

【解决方案3】：

@Franz Thü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.
}

&lt;div id="mainimg"&gt;&lt;/div&gt;

查看 cmets 您应该在该行中添加什么以使其与图像一起使用。

【讨论】：