MouseOver图像效果

我是Javascript和JQuery的新手。

我尝试使用Google搜索但无法准确描述正确的现象，因此Google向我提供了我不想要的结果。

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

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

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

谢谢。

Answer 1

我为Pinterest做了大量的挖掘工作，看看他们究竟是怎么做的，这很难，因为他们缩小了所有的css文件，但这实际上都是用简单的CSS3 hover 。 这是我发现的：

这是Pinterest上的典型引脚（特别是repin）

  Repin  

这是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 } 

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

Answer 2

相当容易实现：

---

HTML

---

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

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

Answer 4

小提琴

 
  
 
 Like 
 
 Repin