鼠标悬停时在另一张图片上显示图片

Question

我希望能在某些图像上方显示一个缩放图像（在鼠标悬停时），以暗示“单击此处进行缩放”。我不想使用光标。

我相信有一种用javascript jQuery实现这个功能的好方法，但我不知道如何做。

有没有人有什么好的想法？

- talkingD0G

Answer 1

HTML:

<a href='big.jpg'>
    <img src='mini.jpg' alt='a kitten'>
    <span>Click to view larger</span>
</a>

CSS：

a > img + span {display: none}
a:hover > img + span {display: inline}

然后按照您的喜好进行样式设置。

- Thom Smith

---

一个小细节：IE5不受支持。 - Thom Smith

Answer 2

这个 jQuery 插件 看起来可以满足你的需求，而且你可以很容易地自定义它以适应你的需要（例如实现点击）。

- Marko

---

来自特隆的同胞，问候 :) - Marko

那个方法可以行得通，但我需要用户点击打开更大的图像的能力。这个脚本使用<a>标签来显示小的放大镜图像。我有什么遗漏吗？ - talkingD0G

是的，查看源代码，你会发现他正在使用$("a.preview").hover(function(e){}。你可以轻松地将其更改为使用click()，但是你需要一个单独的函数来关闭图像（即单击大版本），因为当前正在使用“mouseout”事件。 - Marko

Answer 3

你想使用缩放图标代替指针光标吗？Mozilla支持缩放光标（http://www.worldtimzone.com/mozilla/testcase/css3cursors.html），但是你将不得不面对IE上的问题。也许你可以在一个隐藏的div中加入自定义的缩放图标，像这样：<div style="display:none" id="zoomcursor">yourcursor</div>然后你可以使用图片和jQuery来实现：

$('img.zoomthis').mouseover(function(){
    var pos = $(this).position();
    $('#zoomcursor').css("position","absolute");
    $('#zoomcursor').css("top",pos.top+18);//You have to change this in order to place it right over your image
    $('#zoomcursor').css("left",$(obj).width()-30); //this too
    $('#zoomcursor').show();
}).mouseout(function(){
    $('#zoomcursor').hide();
})

- Alecoletti