Question

我是一名css和js noob。我想完成500px.com，pixoto.com，pinterest.com所做的事情，即在鼠标悬停时完成div叠加，显示有关图像或按钮的信息，用于投票，投票等。

我很确定他们没有使用j来执行此操作，因为我放了一个chrome＆gt;脚本＆gt;鼠标悬停时事件监听器断点，它不会触发任何内容。

他们原来的html标记很小，大部分是“img”标签周围的“a”标签，放在“li”或“div”中。也就是说，在大多数情况下，我没有看到psuedo a：hover类所揭示的任何隐藏的div。在chrome中，我可以检查元素“匹配的css”规则，但我从未在那里看到悬停。

当然这些专业网站有数千行css和js代码，所以我不能说我知道我在说什么。所以我只是想知道是否有一个工具可以显示如何触发css悬停以及css类是什么？

Answer 1

500px.com网站使用纯CSS。

他们通过将不透明度设置为0来隐藏分数。他们通过在悬停时将不透明度设置为1来显示。

查看他们的CSS文件并搜索以下行

.photos .thumb .info .right {
    ....
    opacity: 0; // this hides the score
}

.photos .thumb:hover .info .right, .photos .mobile_payment input.thumb:focus .info .right, .mobile_payment .photos input.thumb:focus .info .right {
    opacity: 1; // this shows the score
}

Answer 2

非常确定500px网站无论如何都必须使用jQuery或一些JS。

如果你正在使用firefox，那么获取名为“FireBug”的附加组件，它允许你检查任何元素，它的css和附加到它的任何js。

这些网站如何实施他们的onhover覆盖？

2 个答案: