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()。该功能可将图像的高度和宽度恢复正常。

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

4 个答案: