首页 ❯

检查仅在鼠标悬停/输入其他元素时出现的元素

javascript google-chrome-devtools
2022-08-30 05:06:47

通常，我想检查一个元素（例如工具提示），该元素仅在鼠标悬停/输入另一个元素时才出现。出现的元素通过 jQuery 的 mouseenter 事件变得可见。

我无法检查工具提示，因为当我的鼠标离开包含元素时，工具提示会消失。

有没有办法暂停JS事件，以便我可以将鼠标悬停在元素上，然后暂停浏览器的JS并成功检查它？

例如，尝试检查 Twitter bootstrap 的工具提示：http://getbootstrap.com/javascript/#tooltips。


答案 1

这在Chrome 38.0.2094.0中相当容易。

下面是它的外观：

循序渐进：

  1. 在“源”面板中打开 DevTools
  2. 通过将鼠标悬停在按钮上来显示工具提示
  3. 按 F8 冻结页面
  4. 切换到“元素”面板，然后使用左上角的放大镜图标选择工具提示

如果工具提示由于 CSS 而显示，在这种情况下，您可以执行以下操作：

循序渐进：

  1. 打开开发工具
  2. 在开发工具中选择触发元素（链接）
  3. 右键单击，然后选择“强制元素状态”，然后选择“：悬停”
  4. 检查 CSS 工具提示

答案 2

Safari 和 Chrome 的 Web Inspector 都提供了复选框，您可以在其中切换元素的 、 和 状态。使用它们可能更容易。:active:focus:hover:visited

野生动物园：

The checkboxes in Safari

铬：

The checkboxes in Chrome


推荐
更多 »
标签
更多 »
php pass-by-reference optional-parameters default-value javascript arrays dom function string object serialization tostring visibility syntax jslint use-strict operators equality equality-operator identity-operator datetime timestamp date-arithmetic redirect angularjs loops foreach iteration scope variables
推荐
更多 »