0

我是 Javascript 和 JQuery 的新手。

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

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

这很容易做到吗？我只需要在图像内放一个盒子吗？

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

谢谢你。

4

4 回答 4

2

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

这是 Pinterest 上的一个典型图钉（特别是一个 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>

这是repin、like和comment按钮的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 将其显示为块。实际上，如果您检查元素，您可以看到所有按钮，但在您悬停之前它们不会显示在屏幕上。当然，链接到其他站点只是通过a href将用户发送到另一个链接来完成。希望这可以帮助。

于 2012-12-29T10:30:02.047 回答
0

相当容易实现：

HTML

<div class="gallery-item">

    <a href="#">
      <img alt="" src="image.jpg" />
    </a>

    <div class="gallery-item-like"> <!-- class `gallery-item-like` is `display:none;` by default -->
      <a href="#" class="button-like">
        <img src="icon.png" width="20" height="20" title="iLike" />
      </a>
    </div>

</div>

JS

$('.gallery-item').hover(
       function(){
           $(this).find(".gallery-item-like")
            .fadeIn("fast");
       },
       function(){
           $(this).find(".gallery-item-like")
            .fadeOut("fast");
     }
);

CSS

.gallery-item-like {
    display: none;
    font-size: 10pt;
    position: relative;

    top: 15px;
    left: 15px;
}
于 2012-12-29T10:10:43.067 回答
0

小提琴

<div class="box"> <img src="myimage"> <div class="options"> <div class="button"> Like </div> <div class="button"> Repin </div> </div> </div>
于 2012-12-29T10:11:07.480 回答
0

您可以使用按钮代替图像，并将实际的 img 标签放在按钮内。然后在按钮内添加其他元素，如 div。现在，您可以使用 javascript/jquery 选择性地隐藏和显示鼠标悬停的 div。

于 2012-12-29T10:12:01.950 回答