отображать изображение при наведении мыши - PullRequest
Новая
       5

отображать изображение при наведении мыши

0 голосов
/ 20 декабря 2011

Какой самый простой способ добавить значок увеличения в левом верхнем углу изображения, когда вы наводите курсор на изображение.

Все, что я нахожу с опрокидыванием, влияет на фоновое изображение.

В идеале я бы сделал только 1 зум и изображение 

<div class="zoom"><img src="img/zoom_icon.png" /></div>

и клонировать это на любое изображение внутри div, называемого галереей 

 <div class="gallery">
  <a href="#zoomed"><img src="img/hey.png" /></a>
 </div>

И используйте jquery с указателем мыши, чтобы получить класс масштабирования и правильно его расположить: 

display: block; position: relative; top:0; left:0

А при наведении мыши скрыть значок зума.

Надеюсь, это имеет смысл. Любой совет был бы великолепен.

1 Ответ

3 голосов
/ 20 декабря 2011

С jQuery: 

var zoomIcon = $('<img src="path/to/zoom/icon.png" class="zoomIcon" />');
$('.zoom').hover(
    function(){
        $(this).append(zoomIcon);
    },
    function(){
        $(this).find('.zoomIcon').remove();
    });

С помощью CSS: 

.gallery {
    position: relative;
}

.gallery > .zoomIcon {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

.gallery:hover > .zoomIcon {
    display: block;
}

Это, конечно, требует наценки: 

<div class="gallery">
    <img src="path/to/zoom/icon.png" class="zoomIcon" />
    <!-- other content -->
</div>
...