Css 创建悬停在图像框上

我该如何创建一个CSS框，当光标悬停在上面时，它会变成另一个图像？到目前为止，我还没弄明白。我要做的是点击改变一个，而不是停留在一个上面

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

在div上使用css背景图像而不是img

---

与其他anwers一样，您可以使用带有背景图像集的平原，并将其替换为：hover jsfiddle.net/evanbiggs/34n8npan，或者如果您无法使用平原s，您可以获得创造性-

HTML

---

可能与上面的评论重复-您可以使用带有背景图像集的普通图像，并将其替换为：hover，或者如果您无法使用普通图像，您可以获得创造性@Evan网站上的HTML代码只是给了我一张图片，下面还有另一张图片，它们是包装在一个容器里还是什么的？基本上，我链接的第二个小提琴有第二个要显示的图像隐藏在第一个图像下，当第一个图像悬停时，它被隐藏并显示第二个图像。如果需要的话，您还可以使用一些z索引来进行分类。只需确保包装器/父容器的相对位置与fiddle@Ah-whoops类似-只需将它们设置为显示：block/inline block；或者在包含它们的div上设置一个宽度/高度，它会对其进行排序。如果我想把它实现到一个网站上呢？你可以这样做：有什么问题吗？这很好，但是，当鼠标在图片下方两三厘米处时，它仍然会改变。

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

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

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