jquery - 这些站点如何实现悬停覆盖？

Question

我是一个 css 和 js 菜鸟。我想完成 500px.com、pixoto.com、pinterest.com 已经完成的工作，即在鼠标悬停时完成 div 叠加，显示有关图像或投票、收藏等按钮的信息。

我很确定他们没有使用 js 来执行此操作，因为我在鼠标悬停时放置了 chrome > script > 事件监听器断点并且它不会触发任何东西。

他们原来的 html 标记是最小的，大部分只是一个围绕着“img”标签的“a”标签，放在“li”或“div”中。也就是说，在大多数情况下，我看不到伪 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
}