Показать изображение поверх другого изображения при опрокидывании

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