在图像框上创建悬停答案

【问题标题】：Creating a hover over image box在图像框上创建悬停
【发布时间】：2014-08-13 03:27:53
【问题描述】：

我将如何创建一个 CSS 框，当光标悬停在它上面时，它会变成另一个图像？到目前为止，我似乎无法弄清楚。我只需要单击即可更改一个，而不是悬停在一个上。

<img src="link.jpg"
width="150"
height="150" 
border="1 px"/>

【问题讨论】：

Changing image on hover with css/html 的可能重复项
就像上面的评论 - 你可以使用一个普通的 <div> 和一个 background-image 集，然后将它换成 :hover (jsfiddle.net/evanbriggs/34n8npan) 或者如果你被困在使用普通图像你可以发挥创意。 jsfiddle.net/evanbriggs/5zsv1pde
@Evan 网站上的 HTML 代码只是给了我一张图片，下面还有一张图片
酷，它们是包裹在容器中还是什么的？基本上，我链接的第二个小提琴将第二个图像隐藏在第一个图像下，当第一个图像悬停时，它被隐藏并显示第二个图像。（如果需要，你也可以用一些z-index 来解决这个问题。只要确保包装器/父容器像小提琴一样相对定位）@jsfiddle.net/evanbriggs/5zsv1pde
啊哎呀 - 只需将那些 <img> 设置为 display: block / inline-block; 或在包含它们的 div 上设置一个宽度/高度，它就应该对其进行排序。 jsfiddle.net/evanbriggs/wxzrmbap

标签： css image web hover

【解决方案1】：

在 div 上使用 css background-image 而不是 img

.your-class {
  width: 150px;
  height: 150px;
  background-image: (/fakepath/image.jpg);
}
.your-class:hover {
  background-image: (/fakepath/another-image.jpg);
}

【讨论】：

如果我想在网站中实现它怎么办？
..你可以做到:) 有什么问题？

【解决方案2】：

像其他答案一样 - 您可以使用普通的 <div> 和 background-image 集，然后在 :hover (jsfiddle.net/evanbriggs/34n8npan) 上换掉它，或者如果您无法使用普通的 <img> s 你可以发挥创意 -

HTML

<div>
    <img src="http://placehold.it/250x250&text=Image One" />
    <img src="http://placehold.it/250x250&text=Image Two" />
</div>

CSS

div {
    position: relative;
}
div img {
    display: block;
}
div img:first-child {
    position: absolute;
    top: 0;
    left: 0;
}
div:hover img:first-child {
    display: none;
}

http://jsfiddle.net/evanbriggs/2gvzq9eo/

【讨论】：

这个效果很好，但是当鼠标在图片下方两三厘米时，它仍然会改变。