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

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

3 голосов
/ 14 августа 2010

Я хочу отобразить увеличенное изображение (при наведении курсора) поверх определенных изображений, чтобы подразумевать «нажмите здесь, чтобы увеличить». Я не хочу использовать курсор.

Я уверен, что есть хороший способ сделать это с javascript jQuery, но я этого не знаю.

У кого-нибудь есть хорошие идеи?

Ответы [ 3 ]

3 голосов
/ 14 августа 2010

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}

Тогда стиль, как вам нравится.

1 голос
/ 14 августа 2010

Этот плагин jQuery , кажется, делает то, что вы хотите, и вы можете легко настроить его в соответствии со своими потребностями (то есть реализовать щелчок).

0 голосов
/ 14 августа 2010

Хотите использовать значок масштабирования вместо курсора-указателя? 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();
})
...