Question

我是Javascript和JQuery的新手。

我尝试使用谷歌搜索，但无法准确描述正确的现象，因此谷歌给了我一些我不想要的结果。

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

这是否相当容易 - 我只需要在图像中放一个盒子？

你能指出我正确的方向吗？或者这对我来说真的很简单吗？

谢谢。

Answer 1

我为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的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
 }

基本上当一个引脚没有悬停时，它们会将显示设置为none，然后当用户将鼠标悬停在它上面时，css会将其显示为block。实际上，如果您检查元素，您可以看到所有按钮，但它们只是在您悬停之前不会显示在屏幕上。当然，链接到其他网站只需通过a href来完成，该{{1}}将用户发送到另一个链接。希望这会有所帮助。

Answer 2

相当容易实施：

<强> 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;
}

Answer 3

Fiddle

<div class="box"> <img src="myimage"> <div class="options"> <div class="button"> Like </div> <div class="button"> Repin </div> </div> </div>

Answer 4

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

MouseOver图像效果

4 个答案: