有没有办法测试CSS:悬停在IE Developer工具中?

时间:2012-11-26 21:17:00

标签: internet-explorer ie-developer-tools mousehover

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

5 个答案:

答案 0 :(得分:47)

我不确定您在问这个问题时使用的是哪个版本的IE。

仅为了每个人的信息,我可以通过使用 IE 9 中的以下一系列步骤,通过HTML标签查看悬停样式:

  1. 打开开发人员工具
  2. 将鼠标悬停在要查看其悬停CSS 的元素上,同时保留开发人员窗口
  3. 当鼠标悬停在元素上时按F5
  4. Ctrl + B并单击元素
  5. 您现在可以查看悬停CSS

    编辑(2015年1月):

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

答案 1 :(得分:20)

在IE11中,单击DOM Explorer的“样式”窗格右上角显示的大蓝色“a:”图标,然后选中“悬停”复选框。 Screenshot of Internet Explorer 11 F12 Developer Tools with a: highlighted

如果您看不到“a:”,请先在DOM资源管理器的左窗格中选择一个元素或HTML标记。

答案 2 :(得分:2)

我无法在IE开发人员工具中找到CSS:悬停状态。所以我最终从书签中使用了Firebug Lite。

答案 3 :(得分:1)

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

  1. 找到您需要的元素
  2. 打开开发人员工具
  3. 关注开发人员工具的窗口
  4. 将您想要的元素悬停在
  5. 按F5而不移动鼠标
  6. Ctrl + B并单击元素
  7. 最诚挚的问候。

答案 4 :(得分:1)

对于那些在谷歌上发现这一点的人,我创建了一个跨浏览器工具,只需移动鼠标即可显示HTML / CSS布局。您可以轻松查看悬停状态中的元素。

HTML Box Visualizer - GitHub