39

在 Chromes 开发工具中，您可以选择一个元素并启用悬停状态。有没有办法可以在 Internet Explorer 开发工具中完成？

4

5 回答 5

47

当你问这个问题时，我不确定你使用的是什么版本的 IE。

仅供大家参考，我可以使用IE 9中的以下步骤序列通过 HTML 选项卡查看悬停样式：

  1. 打开开发者工具
  2. 将鼠标悬停在您想要查看其悬停 CSS 的元素上，同时让开发人员窗口保持焦点。
  3. 当您的鼠标仍在元素上方时按 F5
  4. Ctrl + B 并单击元素

您现在可以查看悬停 CSS。

编辑（2015 年 1 月）：

在IE 11中，单击出现在 DOM Explorer 样式窗格右上角的蓝色大“a:”图标，然后选中“悬停”复选框。

于 2013-08-01T21:05:30.610 回答
21

在 IE11 中，单击出现在 DOM Explorer 样式窗格右上角的蓝色大“a:”图标，然后选中“悬停”复选框。 Internet Explorer 11 F12 开发人员工具的屏幕截图，其中：突出显示

如果看不到“a:”，请先在 DOM Explorer 的左侧窗格中选择一个元素或 HTML 标记。

于 2014-07-11T06:35:34.673 回答
2

我在 IE 开发人员工具中也找不到 CSS :hover 状态。所以我最终从一个书签中使用了 Firebug Lite。

于 2013-03-04T11:49:47.340 回答
1

老雷的建议奏效了。当您打开开发人员工具时，请确保它处于焦点状态，以便它可以接收快捷命令 - 当您单击页面的滚动条或页面时，它会聚焦浏览器窗口并将所有快捷命令发送到页面. 为避免错误，请执行以下操作：

  1. 找到你需要的元素
  2. 打开开发者工具
  3. 聚焦开发者工具的窗口
  4. 悬停你想要的元素
  5. 按 F5 不移动鼠标
  6. Ctrl+B 并单击元素

此致。

于 2013-09-18T09:26:00.630 回答
1

对于那些在 Google 上找到它的人，我创建了一个跨浏览器工具，让您只需移动鼠标即可可视化 HTML/CSS 布局。您可以轻松查看处于悬停状态的元素。

HTML 框可视化工具 - GitHub

于 2016-10-24T06:18:23.470 回答