javascript - 鼠标悬停图像效果

Question

我是 Javascript 和 JQuery 的新手。

我试着用谷歌搜索这个，但无法准确描述正确的现象，所以谷歌给了我我不想要的结果。

在像 Pinterest 这样的网站中，他们如何创建鼠标悬停图像效果 - 即图像中的 Repin/Like/Comment 菜单。

这很容易做到吗 - 我只需要图像中有一个框？

你能给我指出正确的方向吗？或者如果真的很简单，可以帮我解决这个问题吗？

谢谢。

Answer 1

我为 Pinterest 做了相当多的挖掘，以了解他们究竟是如何做到的，这非常困难，因为他们缩小了所有的 css 文件，但这实际上都是通过简单的 CSS3 hover 完成的。这是我发现的:

这是 Pinterest 上的典型 pin(特别是 repin)

<a class="Button Button11 WhiteButton ContrastButton repin_link" data-componenttype="MODAL_REPIN" data-id="176555247863760400" href="/pin/176555247863760400/repin/" wotsearchprocessed="true">
    <em></em><span>Repin</span>
</a>

这是回复、点赞和评论按钮的 CSS

.actions.likebutton,
.actions.comment,
.actions.repin_link,
.actions.editbutton,
.actions.unlikebutton {
   display: none
}.pin: hover.actions.likebutton,
 .pin: hover.actions.comment,
 .pin: hover.actions.repin_link,
 .pin: hover.actions.editbutton,
 .pin: hover.actions.unlikebutton {
   display: block
 }

基本上，当一个图钉没有被悬停时，他们将显示设置为无，然后当用户悬停在它上面时，css 将它显示为 block 。实际上，如果你检查元素，你可以看到所有的按钮，但它们只是在你悬停之前不会显示在屏幕上。当然，到其他站点的链接只需通过将用户发送到另一个链接的 a href 即可。希望这会有所帮助。