MouseOver图像效果 [英] MouseOver Image Effect

问题描述

我是Javascript和JQuery的新用户。

I am new to Javascript and JQuery.

我尝试Google搜索，但无法准确描述正确的现象，所以Google给我的结果，

I tried googling about this but could not describe the correct phenomenon accurately so Google gave me results that I wasn't looking for.

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

In sites like Pinterest, how do they create a mouseover image effect - i.e. the Repin/Like/Comment menu within the image.

这是很容易做到的 - 我只需要一个盒子里面的图像？

Is this fairly easy to do - I just need one box inside the image?

你能指向正确的方向，对我来说真的很简单吗？

Can you point me towards the correct direction or if it is really simple solve this for me?

谢谢。

推荐答案

>我做了一个大量的挖掘Pinterest的看看他们是如何做到这是很难，因为他们缩小了所有的CSS文件，但这实际上都是用简单的CSS3 hover 。这是我发现的：

I did a decent amount of digging for Pinterest to see how exactly they do it and it was pretty hard because they minified all their css files but this is actually all done with simple CSS3 hover. Here's what I found:

这是一个典型的pin在Pinterest上（特别是repin）

Here is a typical pin on Pinterest (specifically a 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和CSS按钮的CSS

Here is the CSS for the repin, like, and comment button

.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将其显示为块。实际上，如果你检查元素，你可以看到所有的按钮，但他们只是不显示在屏幕上，直到你悬停。链接到其他网站当然可以通过 a href 简单地完成，它将用户发送到另一个链接。希望这有帮助。

Basically when a pin is not being hovered over, they set the display to none, and then when the user is hovering over it, the css displays it as block. Actually if you inspect element, you can see all the buttons but they just aren't displayed on the screen until you hover. The linking to other sites is, of course, simply done through an a href which sends the user to another link. Hope this helps.

这篇关于MouseOver图像效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！