请参阅:Chrome开发人员工具中的hover状态

我希望看到:我在Chrome浏览器上hover的hover风格。 在Firebug中,有一个Style下拉菜单,允许我select一个元素的不同状态。 我似乎无法在Chrome中find类似的东西。 我错过了什么吗?

现在你可以看到两个类的规则,并强制它们在元素上。

要查看如下规则:hover在“样式”窗格中,单击右上angular的小:hov文本。

切换元素状态

要强制元素进入:hover状态,请右键单击它。

强制元素状态

Chrome开发者工具快捷方式中 元素面板上的其他提示。

编辑:这个答案是错误修复之前,请参阅tnothcutt的答案。

这有点棘手,但是这里有:

  • 用鼠标右键单击元素,但不要将鼠标指针从元素上移开,将其保持hover状态。
  • 通过键盘select检测元素,如向上箭头,然后按Enter键。
  • 查看匹配的CSS规则下的开发者工具,你应该能够看到:hover。

PS:我试着在你的问题标签之一。

我想看看我的Bootstrap工具提示上的hover状态。 在Chrome开发工具中强制使用:hover状态工具没有创build所需的输出,但是通过控制台触发mouseenter事件在Chrome中也有所斩获。 如果jQuery在页面上存在,你可以运行:

 $('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter'); 

强制悬停或鼠标输入Bootstrap Tooltips

Chrome开发者工具中有几种方法可以查看HOVER STATE样式。

方法01

在这里输入图像描述

方法02

在这里输入图像描述

使用Firefox默认开发人员收费

在这里输入图像描述

与Firebug

在这里输入图像描述

如果它有帮助,这在最新的Chrome(47.0.2526.106)中似乎更容易:

检查元素,然后点击左侧水槽中的三个白点:
点击三个白点

然后从这个下拉列表中select所需的元素状态:
这个下拉菜单

我不认为有办法做到这一点。 我提交了一个function请求 。 如果有办法的话,谷歌的开发人员会指出来,我会编辑我的答案。 如果没有,我们将不得不等待观察。 (你可以将问题列为投票)


Chrome项目成员评论1 :在10.0.620.0中,“样式”面板显示:所选元素的hover样式,但不是:active。


(截至本文)当前稳定的频道版本是8.0.552.224。

您可以将Google Chrome浏览器的稳定频道安装replace为Beta频道或开发频道 (请参阅Early Access Release频道 )。

您还可以安装比开发通道更新的chrome的辅助安装 。

…金丝雀的构build比开发渠道更新更频繁,在发布之前不经过testing。 由于Canary构build有时可能无法使用,因此不能将其设置为默认浏览器,并且可能会安装在Google Chrome的上述任何渠道之外。 …

我正在用Chromedebugging菜单hover状态,并且能够看到hover状态代码:

Elements面板中点击Toggle Element statebutton并select:hover

在“ Scripts面板中,转到右下angular的“ Event Listeners Breakpoints ,然后select“ Mouse -> mouseup

现在检查菜单并select您想要的框。 当你释放鼠标button时,它应该停止,并在Elements面板中显示选定的元素hover状态(查看Styles部分)。

我可以通过按照Babikerbuild议的步骤来看到样式 – “右键单击元素,但不要将鼠标指针移离元素,保持hover状态。通过键盘select检查元素,如向上箭头和然后按Enter键“。

按照上述步骤更改样式,然后按键盘上的ctrl + TAB键更改浏览器选项卡。 然后点击您要debugging的选项卡。 你的hover屏幕将仍然在那里。 现在小心地把鼠标移到开发工具区。

我知道我所做的是相当的解决方法,但是它完美地工作,这是我每次都这样做的方式。

取消Chrome开发人员工具

然后,像这样继续:

  • 首先确保Chrome开发人员工具处于未连接状态。
  • 然后,只需将“开发工具”窗口的任何一边移动到要检查的元素的中间位置即可。

悬停在元素上

  • 最后,将鼠标hover在元素上,右键单击并检查元素,将鼠标移动到“开发工具”窗口中,然后就可以使用元素进行游戏:hover css。

干杯!

我认为这不再是铬的问题,但以防万一。 我写了这个jQuery 脚本来检查DOM时,我移动TAB键。

如果更改为使用“鼠标hover”,将如下所示:

 $("body *").on('mouseover', function(event) { console.log(event.target); inspect(event.target); event.stopPropagation(); }); 

您可以轻松地修改它,以便在您单击或在要停止的元素上执行某些操作时删除事件处理程序。

在Chrome中更改hover状态非常简单,只需按照以下步骤操作即可:

1) 右键单击您的页面,select检查

在这里输入图像描述

2)select你想要在DOM中检查的元素

在这里输入图像描述

3)select图钉图标 在这里输入图像描述 (切换元素状态)

4)然后勾选hover

现在您可以在浏览器中看到所选DOM的hover状态了!