如何查看网页上元素的 ":hover" 和 ":active" 属性？ [复制]

Posted 2023-03-06

【中文标题】如何查看网页上元素的 ":hover" 和 ":active" 属性？ [复制]

【英文标题】：How can I see ":hover" and ":active" properties of elements on a webpage? [duplicate]

【发布时间】：2012-02-01 23:08:23

【问题描述】：

在 Google Chrome 和 Firefox 中，只有在元素悬停或单击时才能查看悬停和活动状态 CSS 属性。但是，一旦我的鼠标离开元素或松开鼠标，我就无法再查看属性。

是否有 Chrome 扩展程序或 Firefox 插件可以让我查看处于悬停或活动状态的元素？

【问题讨论】：

该副本适用于 Chrome，适用于 Firefox，see this answer。

我同意.. 和@Domenic，我们认为这是错误的。应该是 Flimm 提到的链接

【参考方案1】：

单击元素检查器内的元素。将鼠标移到元素上，按向上箭头键，然后按向下箭头键。您会看到悬停属性。

【讨论】：

很棒的提示。此外，如果要滚动浏览 css 属性，请按 tab 键（在按 chrome 上的向上和向下箭头键之后）。

在最近的 Firefox 版本中，您只需右键单击元素检查器中的元素并设置所需的状态。见DOM Inspector FAQ

【参考方案2】：

我记得，Firebug 和 Firefox 的 DOM Inspector 扩展都允许您检查任意元素的 :hover 和 :active 状态。

【讨论】：

这在 Firefox 29 中仍然有效吗？我似乎无法像以前那样找到悬停菜单。

@billynoah 它绝对可以在 DOM Inspector 中使用，这是我通常使用的。

您使用的是 Firefox 29？我实际上阅读了这篇文章 (developer.mozilla.org/en-US/docs/Tools/…)，了解他们如何更改行为以在 html 窗格中而不是在网页本身中为每个元素提供一个下拉菜单。实际上很漂亮 - 因为我习惯了旧方式，所以我很困惑。

在最近的 Firefox 版本中，只需在检查器中右键单击您感兴趣的 DOM 节点。

似乎 Firefox 41 现在有更好的控件来应用悬停、活动和焦点伪类。我把这个留在这里仅供参考。 developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/…