鼠标悬停在图像上时更改图像

Question

目前我正在和我的朋友一起开发一个网上商店，我们希望这个形象;一旦鼠标结束了;更改产品的第二张图片。但是只要鼠标不再覆盖它，它就需要改回原始图像。

很像here

谢谢...

Answer 1

您希望查看“鼠标悬停”事件：

https://developer.mozilla.org/en-US/docs/Web/Events/mouseover

Answer 2

可用于缩放图像部分的最着名的jQuery插件是cloudzoom，但它不是免费的。

此页面中有很多图像缩放插件：

http://netfruits.com/2013/03/jquery-image-zoom-plugins/

一些不错的免费：

Easyzoom可能是最接近你所需要的免费，正如你所提到的那样。 还有提升变焦，这是免费的，看起来很不错。

Answer 3

请查看此演示：https://jsfiddle.net/IA7medd/2774m4ob/

HTML：

<div class="images">
  <img src="http://www.velt.ch/uploads/images/w254h254_art_49_8.jpg" class="img1">
  <img src="http://www.velt.ch/uploads/images/w254h254_art_49_9.jpg" class="img2">
</div>

我们将用css处理它：

.images{
  width:250px;
  height:250px;
  overflow:hidden;
  position:relative;
}
.images img{
  position:absolute;
  top:0;
  left:0;
  z-index:1;
}
.images .img2{
  z-index:2;
  display:none;
}
.images:hover .img2{
  display:block;
}