我是一个 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 类触发?
最佳答案
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
}
关于jquery - 这些站点如何实现悬停覆盖?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7760656/