我想看看:hover
我在Chrome中徘徊的锚的样式。在Firebug中,有一个样式下拉列表,允许我为元素选择不同的状态。我似乎在Chrome中找不到任何类似的东西。我想念什么吗?
请参阅Chrome开发者工具中的:hover状态
我可以按照Babiker建议的以下步骤查看样式:“右键单击元素,但不要将鼠标指针移离元素,将其保持悬停状态。通过键盘选择检查元素,如向上箭头和然后按Enter键。”
要更改样式,请按照上述步骤操作,然后-通过按键盘上的ctrl + TAB键更改浏览器标签。然后,在要调试的选项卡上单击返回。悬停屏幕仍然存在。现在,小心地将鼠标移至开发人员工具区域。
我正在hover
使用Chrome 调试菜单状态,并且这样做是为了能够看到悬停状态代码:
在Elements
面板中单击,Toggle Element state
然后选择:hover
。
在Scripts
面板中,转到Event Listeners Breakpoints
右底部,然后选择Mouse -> mouseup
。
现在检查菜单,然后选择所需的框。当您释放鼠标按钮时,它应该停止并在Elements
面板中显示所选元素的悬停状态(请参见本Styles
节)。
现在,您既可以看到伪类规则,也可以将它们强制应用于元素。
要查看“ :hover
样式”窗格中的规则,请单击右上角的小:hov
文本。
要强制某个元素进入:hover
状态,请右键单击它。
在对其他提示元素面板在Chrome开发者工具的快捷方式。
我认为没有办法做到这一点。我提交了功能请求。如果有办法,Google的开发人员会指出这一点,然后我将编辑我的答案。如果没有,我们将不得不拭目以待。(您可以为该问题加注星标以进行投票)
Chrome项目成员的注释1:在10.0.620.0中,“样式”面板显示所选元素的:hover样式,但不显示:active。
(截至本文发布)当前的稳定频道版本为8.0.552.224。
您可以使用Beta通道或Dev通道替换Google Chrome的稳定通道安装(请参阅Early Access Release Channels)。
您还可以安装chrome的辅助安装,该安装比Dev通道更新得多。
... Canary版本的更新频率甚至高于Dev通道,并且在发布之前未经测试。由于Canary版本有时可能无法使用,因此无法将其设置为您的默认浏览器,并可能安装在上述Google Chrome浏览器的任何其他渠道之外。...
编辑:此答案是在错误修复之前,请参阅tnothcutt的答案。
这有点棘手,但是这里是:- 右键单击元素,但不要将鼠标指针从该元素移开,保持其悬停状态。
- 通过键盘选择检查元素,如向上箭头所示,然后按Enter键。
- 在“匹配CSS规则”下的开发人员工具中,您应该能够看到:hover。
PS:我在您的一个问题标签上尝试过此操作。
就我而言,我想调试引导工具提示。但是以上方法对我不起作用。我猜bootstrap是通过mouse in / out事件来实现的。
无论如何,当我将鼠标悬停在按钮上时,它将在按钮下方生成一个兄弟html元素,因此我在“开发人员工具”窗口的“元素”标签中选择了按钮的父元素,将按钮悬停在“ Ctrl + C”上,然后我可以粘贴包含生成的代码的源代码。最后找到生成的代码,然后通过“元素”选项卡中的“编辑为HTML”将其添加到源代码中。
希望它可以帮助别人。