Question

我想在某些图像上显示缩放图像（在鼠标悬停时），意味着“点击此处进行缩放”。我不想使用光标。

我确信使用javascript jQuery有一个很好的方法，但我不知道。

有没有人有什么好主意？

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}

然后你喜欢风格。

Answer 2

This jQuery plugin似乎可以满足您的需求，您可以轻松自定义它以满足您的需求（即实施点击）。

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();
})

在翻转时在另一个图像上显示图像

3 个答案: