Question

我如何创建一个CSS框，当光标悬停在其上时，它会变成另一个图像？到目前为止，我有这个，似乎无法弄明白。我已经让它成为一个改变一个，但不是一个悬停在一个。

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

Answer 1

在div而不是background-image

上使用css img

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

Answer 2

与其他版本一样 - 您可以使用带有<div>集的普通background-image，然后将其交换：hover（jsfiddle.net/evanbriggs/34n8npan）或者如果您遇到困难简单<img>你可以发挥创意 -

<强> 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/

在图像框上创建鼠标悬停

2 个答案: