Question

我在 pinterest.com 等网站上看到过，当你将鼠标悬停在图像上时，facebook分享或者分享的标志，评论数量等都显示出来。我一直在谷歌搜索，我得到了onmouseover事件的答案，但我认为他们做了别的事情。任何人都可以给我一个提示或代码示例。我希望能够将鼠标悬停在图像上，您可以与Facebook分享，或推特或通过电子邮件将图像发送给某人。谢谢

Answer 1

如果您想要特定效果，最好检查网站代码并查看它们是如何做到的。

这是一个非常基本的示例，可以帮助您入门：

<div class="wrap">
    <img src="http://placehold.it/350x150">
    <div class="info">
        Stuff here...
    </div>
</div>

.wrap {
    width:350px;
    height:150px;
    position:relative;
}

.info {
    background:rgba(255, 0, 0, 0.2);
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
}

.wrap:hover .info {
    opacity:1;
}

jsfiddle

将鼠标悬停在图片上方

1 个答案: