Question

我有一个画廊，我希望在悬停时使用带有缩放图标的透明图像覆盖每个图像。如何使用jQuery以最有效的方式实现这一目标？所有图库图片都在<a></a>标记中，如下所示：

<a href="pictures/gallery/fullHD/1.jpg" target="_blank">
    <img src="pictures/gallery/fullHD/1.jpg" class="gallery_pic"/>
</a>

我寻找答案，但找不到任何可以解决问题的方法。如果你知道如何在没有jQuery的情况下实现这一点，那也没关系。

Answer 1

这里不需要jQuery - 您可以单独使用CSS来实现您的需求。您可以使用:before伪类将内容添加到a上显示的:hover元素。试试这个：

a:before {
    position: absolute;
    font:normal normal normal 14px/1 FontAwesome;
    content: "\f002";
    top: 5px;
    left: 5px;
    width: 50px;
    height: 50px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
a:hover:before {
    opacity: 1;
}

Example fiddle

请注意，我使用FontAwesome添加了放大镜图标，但您可以轻松使用所需的任何图片并改为设置background-image属性。

将图像放在另一个图像上，并使用jquery为库设置

1 个答案: