这些网站如何实现悬停叠加？
我是一个 css 和 js 菜鸟。我想完成 500px.com、pixoto.com、pinterest.com 所做的事情，即在鼠标悬停时实现 div 覆盖，显示有关图像或用于投票、收藏等按钮的信息。
我很确定它们不是' t 使用 js 来做到这一点，因为我放了 chrome >脚本>鼠标悬停时事件侦听器断点，并且不会触发任何内容。
他们最初的 html 标记很少，大部分只是“img”标签周围的“a”标签，放置在“li”或“div”内。也就是说，在大多数情况下，我看不到伪 a:hover 类所揭示的任何隐藏 div。在 chrome 中，我可以检查元素“匹配的 css”规则，但我从未在其中看到悬停。
当然这些专业网站有几千行css和js代码，所以我不能肯定地说我知道我在说什么。所以我只是想知道是否有一个工具可以显示CSS悬停是如何触发的以及由什么CSS类触发？
I'm a css and js noob. I would like to accomplish what 500px.com, pixoto.com, pinterest.com have done, which is to accomplish div overlays on mouseover, revealing information about an image or buttons for voting, faving etc.
I'm pretty sure they aren't using js to do this because I put a chrome > script > event listener break point on mouseover and it doesn't trigger anything.
Their original html markup is minimal, just an "a" tag around an "img" tag for the most part, placed inside an "li" or "div". that is, in most cases I don't see any hidden divs that a psuedo a:hover class is revealing. In chrome I can inspect an elements "matched css" rules, but I never see a hover in there.
Of course these professional sites have many thousands of lines of codes of css and js, so I can't definitely say I know what I'm talking about. so I'm just wondering if there is a tool that shows how css hover is triggered and by what css class?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
500px.com 网站使用纯 CSS。
他们通过将不透明度设置为 0 来隐藏分数。他们通过在悬停时将不透明度设置为 1 来显示分数。
查看他们的 CSS 文件并搜索以下行
The 500px.com site uses plain CSS.
They hide the score by setting opacity to 0. They show the by setting the opacity to 1 on hover.
Look in their CSS file and search for the following lines
很确定 500px 的网站无论如何都必须使用 jQuery 或一些 JS。
如果您使用的是 Firefox，那么请获取名为“FireBug”的附加组件，它允许您检查任何元素、其 css 以及附加到它的任何 js。
Pretty sure the 500px site has to use jQuery or some JS anyway.
if you are using firefox then get the add on called "FireBug" which allows you to inspect any element, its css and any js attached to it.