Question

将鼠标悬停在图像上方时，将缩放图标添加到图像左上角最简单的方法是什么。

我发现翻转的所有内容都会影响背景图像。

理想情况下，我只会制作1个缩放div和图像

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

并将其克隆到名为gallery

的div内的任何图像

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

使用带有鼠标悬停的jquery来获取缩放类并正确定位：

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

当你使用mouseout隐藏缩放图标时。

希望这是有道理的。任何建议都会很棒。

Answer 1

使用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>

在鼠标上显示图像

1 个答案: