如何在图像上悬停时放大图像？

Question

我想在将鼠标悬停在缩略图上时显示缩略图，类似于中的缩略图

http://www.freelayouts.com/websites/html-templates Plz的帮助。任何帮助将不胜感激。

Answer 1

你需要的是一个工具提示插件。有很多。看看这个清单：https://cssauthor.com/jquery-css3-hover-effects/

Answer 2

<img class="enlarge-onhover" src="img.jpg">

...

And on the css:

.enlarge-onhover {
     width: 30px;
     height: 30px;
}

.enlarge-onhover:hover {
     width: 70px;
     height: 70px;
}

Answer 3

看看http://fancybox.net/blog

Fancybox看起来不错，使用JQuery并且可以通过各种显示/隐藏效果进行高度配置。本页的第3号教程向您展示了如何使用OnHover而不是OnClick

主页http://fancybox.net/home显示了一些视觉效果的例子

Answer 4

<script>
function bigImg(x) {
   x.style.height = "64px";
   x.style.width = "64px";
}

function normalImg(x) {
   x.style.height = "32px";
   x.style.width = "32px";
}
</script>

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">

当用户将鼠标悬停在图像上时，会触发bigImg()函数。此功能可放大图像。

当鼠标指针移出图像时，将触发函数normalImg()。该功能将图像的高度和宽度设置为正常。