提问



我希望看到一个锚点的:hover样式我在Chrome中徘徊。在Firebug中,有一个样式下拉列表,允许我为一个元素选择不同的状态。我似乎无法在Chrome中找到类似内容。我错过了什么吗?

最佳参考


现在,您可以看到伪类规则并强制它们在元素上。


要在样式窗格中查看:hover之类的规则,请单击右上角的小:hov文本。


[16]


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


[17]


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

其它参考1


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

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



  • 右键单击元素,但不要T将鼠标指针移离元素,使其保持悬停状态。

  • 通过键盘选择检查元素,如点击向上箭头,然后按Enter键。

  • 查看匹配CSS规则下的开发者工具,您应该能够看到:hover。



PS:我在你的一个问号上试了这个。

其它参考2


我想在Bootstrap工具提示上看到悬停状态。强制Chrome浏览器中的:悬停状态工具没有创建所需的输出,但是通过控制台触发mouseenter事件在Chrome中起了作用。如果页面上存在jQuery,则可以运行:


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




其它参考3


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


方法01


[20]


方法02


[21]


使用Firefox Default Developer Toll


[22]


使用Firebug


[23]

其它参考4


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


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

[24]


然后从此下拉列表中选择所需的元素状态:

[25]

其它参考5


我认为没有办法实现这一点。我提交了功能请求。如果有办法,谷歌的开发人员会勉强指出它,我会编辑我的答案。如果没有,我们将不得不等待观看。(你可以为这个问题加注星标投票)[26]






  Chrome项目成员的评论1:在10.0.620.0中,样式面板显示所选元素的:悬停样式,但不显示:Activity。[27]






(截至本文)Current Stable频道版本为8.0.552.224。[28]


您可以使用Beta频道或开发频道替换Google Chrome的稳定频道安装(请参阅早期访问版本频道)。[29] [30] [31] [32]


您还可以安装Chrome的辅助安装,它比Dev通道更新。[33]



  ... Canary构建版本比Dev版本更新更频繁,并且在发布之前未经过测试。由于Canary版本有时可能无法使用,因此无法将其设置为默认浏览器,并且除了上述任何Google Chrome渠道外,还可能会安装。 ...


其它参考6


我知道我所做的就是解决方法,但是它完美无缺,这就是我每次都这样做的方式。


[34]


然后,继续这样:



  • 首先确保Chrome开发者工具已取消停靠。

  • 然后,只需将Dev Tools窗口的任何一侧移动到要悬停时要检查的元素的中间位置。



[35]



  • 最后,悬停元素,右键单击并检查元素,将鼠标移动到开发工具窗口,您就可以使用元素:hover css。



干杯!

其它参考7


我正在使用Chrome调试菜单hover状态并执行此操作以查看悬停状态代码:


Elements面板中单击Toggle Element state按钮并选择:hover


Scripts面板中,转到右下部分的Event Listeners Breakpoints并选择Mouse -> mouseup


现在检查菜单并选择所需的框。当您松开鼠标按钮时,它应该停止并在Elements面板中显示所选的元素悬停状态(查看Styles部分)。

其它参考8


我可以按照Babiker建议的以下步骤看到这种风格 -
右键单击元素,但DONT将鼠标指针移离元素,使其保持悬停状态。通过键盘选择检查元素,如点击向上箭头,然后按Enter键。


如需更改款式,请按以上步骤操作,然后
通过按键盘上的ctrl + TAB更改浏览器选项卡。
然后单击要调试的选项卡。你的悬停屏幕仍然在那里。现在小心地将鼠标移到开发人员工具区域。

其它参考9


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


1)右键单击页面中的,然后选择检查


[36]


2)在 DOM 中选择您要检查的元素


[37]


3)选择图钉图标(切换元素状态)[38]


4)然后勾选悬停


[39]


现在,您可以在浏览器中看到所选 DOM 的悬停状态!

其它参考10


在我的情况下,我想dubug bootstrap工具提示。但上面的方法对我不起作用。我想bootstrap通过鼠标输入/输出事件实现了这一点。


无论如何,当我将鼠标悬停在按钮上时,它会在按钮下方生成一个兄弟html元素,因此我在开发人员工具窗口的元素选项卡中选择按钮的父元素,将鼠标悬停在按钮上,然后按Ctrl + C ,然后我可以粘贴包含生成代码的源代码。上次查找生成的代码,并通过Elements选项卡中的Edit as HTML将其添加到源代码中。


希望它可以帮助某人。

其它参考11


我认为这不再是Chrome中的问题,只是以防万一。当我使用TAB键移动时,我编写了这个jQuery脚本来检查DOM。[40]


如果更改为使用mouseover,则如下所示:


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


只要单击或对要停止的元素执行某些操作,就可以轻松修改它以删除事件处理程序。