html - 将鼠标悬停在图像上

Question

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

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