检查 Chrome 中的悬停元素？

Question

我试图通过 Chrome 的开发人员工具查看工具提示在网站上的结构。但是，即使我将鼠标悬停在项目上，当我“检查元素”时，html 中的工具提示也不会显示任何内容。我知道我可以将 Style 设置为 :hover ，但我仍然看不到工具提示的 html 或 css。

有任何想法吗？

原文由 Skitterm 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

实际上，我发现了一个使用 Twitter Bootstrap 工具提示的技巧。如果您在另一台显示器上打开开发工具 (F12)，然后将鼠标悬停在元素上以显示工具提示，右键单击就像选择“检查元素”一样。保持该上下文菜单打开，将焦点移到开发工具上。工具提示的 html 应显示在元素旁边，它是 HTML 中的工具提示。然后您可以将其视为另一个元素。如果你回到 Chrome，HTML 就会消失，所以需要注意一些事情。

有点奇怪的方式，但它对我有用，所以我想我会分享它。

原文由 Justin Chmura 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我找到了一个解决这个问题的好方法： • 打开元素选项卡 • 检查页面上的元素，应该靠近您要检查的元素 • 将鼠标悬停在工具提示上 • 当开发/元素选项卡打开时 点击Ctrl F 将焦点移动到元素选项卡中的文本区域，其中显示按字符串、选择器或 Xpath 查找 • 使用键盘键向上/向下导航元素，直到找到要查找的元素，不要触摸你的鼠标

原文由 K Name 发布，翻译遵循 CC BY-SA 4.0 许可协议