我希望看到
:hover
我在Chrome中徘徊的锚点的
:hover
样式。 在Firebug中,有一个样式下拉列表,允许我为元素选择不同的状态。 我似乎无法在Chrome中找到类似内容。 我错过了什么吗?
#1楼
我正在使用Chrome调试菜单
hover
状态并执行此操作以查看悬停状态代码:
在“
Elements
面板中,单击“
Toggle Element state
按钮,然后选择
:hover
。
在
Scripts
面板中,转到右下方的
Event Listeners Breakpoints
,然后选择
Mouse -> mouseup
。
现在检查菜单并选择所需的框。 当您释放鼠标按钮时,它应该停止并在“
Elements
面板中显示所选的元素悬停状态(查看“
Styles
部分)。
#2楼
我认为这不再是Chrome中的问题,只是以防万一。 当我使用TAB键移动时,我编写了这个jQuery 脚本来检查DOM。
如果更改为使用'mouseover',则如下所示:
$("body *").on('mouseover', function(event) {
console.log(event.target);
inspect(event.target);
event.stopPropagation();
});
只要单击或对要停止的元素执行某些操作,就可以轻松修改它以删除事件处理程序。
#3楼
我可以按照Babiker建议的以下步骤看到这种风格 - “右键单击元素,但不要将鼠标指针移离元素,使其保持悬停状态。通过键盘选择检查元素,如在向上箭头和然后输入密钥。“
要更改样式,请按照上述步骤操作,然后按键盘上的ctrl + TAB更改浏览器选项卡。 然后单击要调试的选项卡。 你的悬停屏幕仍然在那里。 现在小心地将鼠标移到开发人员工具区域。
#4楼
我想在Bootstrap工具提示上看到悬停状态。 强制Chrome浏览器中的:悬停状态工具没有创建所需的输出,但是通过控制台触发mouseenter事件在Chrome中起了作用。 如果页面上存在jQuery,则可以运行:
$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');

#5楼
我知道我所做的就是解决方法,但它完美无缺,这就是我每次都这样做的方式。
然后,继续这样:
- 首先确保Chrome开发者工具已取消停靠。
- 然后,只需将Dev Tools窗口的任何一侧移动到要悬停时要检查的元素的中间位置。
- 最后,悬停元素,右键单击并检查元素,将鼠标移动到开发工具窗口,您就可以使用元素:hover css。
干杯!
#6楼
如果它有帮助,这在最新的Chrome(47.0.2526.106)中似乎更容易:
检查元素,然后单击左侧排水沟中的三个白点:
然后从此下拉列表中选择所需的元素状态:
#7楼
有几种方法可以在Chrome开发者工具中查看HOVER STATE样式。
方法01
方法02
使用Firefox Default Developer Toll
用Firebug
#8楼
在Chrome中更改为悬停状态非常简单,只需按照以下步骤操作即可:
1) 右键单击页面并选择检查
2)在DOM中选择您想要检查的元素
3)选择图钉图标
(切换元素状态)
4)然后勾选悬停
现在您可以在浏览器中看到所选DOM的悬停状态!
#9楼
我认为没有办法做到这一点。 我提交了一个功能请求 。 如果有办法,谷歌的开发人员会勉强指出它,我会编辑我的答案。 如果没有,我们将不得不等待观看。 (你可以为问题加注星标投票)
Chrome项目成员的评论1 :在10.0.620.0中,“样式”面板显示所选元素的:悬停样式,但不显示:活动。
(截至本文)Current Stable频道版本为8.0.552.224。
您可以使用Beta频道或开发频道替换Google Chrome的稳定频道安装(请参阅早期访问版本频道 )。
您还可以安装chrome的辅助安装,它比Dev通道更新 。
... Canary版本比Dev版本更新更频繁,并且在发布之前未经过测试。 由于Canary版本有时可能无法使用,因此无法将其设置为默认浏览器,并且除了上述Google Chrome浏览器的任何渠道外,还可以安装。 ...
#10楼
编辑:这个答案是在错误修复之前,请参阅tnothcutt的回答。
这有点棘手,但这里有:
- 右键单击元素,但不要将鼠标指针移离元素,使其保持悬停状态。
- 通过键盘选择检查元素,如按向上箭头,然后按Enter键。
- 查看匹配CSS规则下的开发人员工具,您应该能够看到:悬停。
PS:我在你的一个问题标签上尝试了这个。
#11楼
在我的情况下,我想dubug bootstrap工具提示。 但上述方法对我不起作用。 我想bootstrap通过鼠标输入/输出事件实现了这一点。
无论如何,当我将鼠标悬停在按钮上时,它会在按钮下方生成一个兄弟html元素,因此我在“开发人员工具”窗口的“元素”选项卡中选择按钮的父元素,将鼠标悬停在按钮上,然后按“Ctrl + C”,然后我可以粘贴包含生成代码的源代码。 最后找到生成的代码,并通过“Elements”选项卡中的“Edit as HTML”将其添加到源代码中。
希望它可以帮助某人。
#12楼
现在,您可以看到伪造的类规则并强制它们在元素上。
要查看以下规则
:hover
在“样式”窗格中,请单击右上角的小
:hov
文本。
要强制元素进入
:hover
状态,请右键单击它。
Chrome开发者工具快捷方式中有关元素面板的其他提示。