使用 jquery 将图像悬停在另一个图像上以用于图库

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 伪类将内容添加到:hover 上显示的a 元素。试试这个：

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 属性。