我想看一个锚的 :hover 样式我是一个样式下拉列表,它允许我为一个元素选择不同的状态 . 我似乎无法在Chrome中找到类似内容 . 我错过了什么吗?
:hover
有几种方法可以在Chrome开发者工具中查看 HOVER STATE 样式 .
Method 01
Method 02
With Firefox Default Developer Toll
With Firebug
这有点棘手,但这里有:
右键单击元素,但不要将鼠标指针移离元素,使其保持悬停状态 .
通过键盘选择检查元素,如按向上箭头,然后按Enter键 .
查看匹配CSS规则下的开发人员工具,您应该能够看到:悬停 .
PS:我在你的一个问题标签上尝试了这个 .
在Chrome中更改为 hover 状态非常简单,只需按照以下步骤操作即可:
1)在您的页面中 Right click 并选择检查
2)在 DOM 中选择您要检查的元素
3)选择图钉图标(切换元素状态)
4)然后勾选 hover
现在,您可以在浏览器中看到所选 DOM 的悬停状态!
我认为这不再是Chrome中的问题,只是以防万一 . 当我使用TAB键移动时,我写了这个jQuery script以检查DOM .
如果更改为使用'mouseover',则如下所示:
$("body *").on('mouseover', function(event) { console.log(event.target); inspect(event.target); event.stopPropagation(); });
只要单击或对要停止的元素执行某些操作,就可以轻松修改它以删除事件处理程序 .
现在,您可以看到伪类规则并强制它们在元素上 .
要在“样式”窗格中查看类似 :hover 的规则,请单击右上角的小 :hov 文本 .
:hov
要强制元素进入 :hover 状态,请右键单击它 .
关于elements panel的其他提示Chrome Developer Tools Shortcuts .
如果它有帮助,这在最新的Chrome(47.0.2526.106)中似乎更容易:
检查元素,然后单击左侧装订线中的三个白点:
然后从此下拉列表中选择所需的元素状态:
我知道我所做的就是解决方法,但是它完美无缺,这就是我每次都这样做的方式 .
然后,继续这样:
首先确保Chrome开发者工具已取消停靠 .
然后,只需将Dev Tools窗口的任意一侧移动到要悬停时要检查的元素的中间位置 .
最后,悬停元素,右键单击并检查元素,将鼠标移动到开发工具窗口,您就可以使用元素:hover css .
干杯!
我可以通过遵循Babiker建议的以下步骤来看到样式 - “右键单击元素,但不要将鼠标指针移离元素,使其保持悬停状态 . 通过键盘选择检查元素,如在向上箭头和然后输入密钥 . “
要更改样式,请按照上述步骤操作,然后按键盘上的ctrl TAB更改浏览器选项卡 . 然后单击要调试的选项卡 . 你的悬停屏幕仍然在那里 . 现在小心地将鼠标移到开发人员工具区域 .
我认为没有办法做到这一点 . 我提交了 a feature request . 如果有办法,谷歌的开发人员会勉强指出它,我会编辑我的答案 . 如果没有,我们将不得不等待观看 . (你可以为问题加注星标投票)
Chrome项目成员的注释1:在10.0.620.0中,“样式”面板显示所选元素的:悬停样式,但不显示:活动 .
(截至本文)当前Stable channel版本为8.0.552.224 .
您可以使用Beta channel或Dev channel替换_135927_安装的Google Chrome(请参阅Early Access Release Channels) .
您也可以安装secondary installation of chrome that is even more up to date than the Dev channel .
... Canary构建版本比Dev通道更新更频繁,并且在发布之前未经过测试 . 由于Canary版本有时可能无法使用,因此无法将其设置为默认浏览器,并且除了上述任何Google Chrome渠道外,还可能会安装 . ...
我想在Bootstrap工具提示上看到悬停状态 . 强制Chrome浏览器中的:悬停状态工具没有创建所需的输出,但是通过控制台触发mouseenter事件在Chrome中起了作用 . 如果页面上存在jQuery,则可以运行:
$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');
我正在使用Chrome调试菜单 hover 状态并执行此操作以查看悬停状态代码:
hover
在 Elements 面板中单击 Toggle Element state 按钮并选择 :hover .
Elements
Toggle Element state
在 Scripts 面板中,转到右下方的 Event Listeners Breakpoints 并选择 Mouse -> mouseup .
Scripts
Event Listeners Breakpoints
Mouse -> mouseup
现在检查菜单并选择所需的框 . 释放鼠标按钮时,它应该停止并在 Elements 面板中显示所选的元素悬停状态(查看 Styles 部分) .
Styles
在我的情况下,我想dubug bootstrap工具提示 . 但上面的方法对我不起作用 . 我想bootstrap通过鼠标输入/输出事件实现了这一点 .
无论如何,什么时候我将鼠标悬停在一个按钮上,它会在按钮下面生成一个兄弟html元素,所以我在“Developer tools”窗口的“Elements”选项卡中选择按钮的父元素,将鼠标悬停在按钮上,然后“Ctrl C”,然后我就可以粘贴了包含生成代码的源代码 . 最后找到生成的代码,并通过“Elements”选项卡中的“Edit as HTML”将其添加到源代码中 .
希望它可以帮助某人 .
12 回答
有几种方法可以在Chrome开发者工具中查看 HOVER STATE 样式 .
Method 01
Method 02
With Firefox Default Developer Toll
With Firebug
编辑:这个答案是在错误修复之前,请参阅tnothcutt的回答 .
这有点棘手,但这里有:
右键单击元素,但不要将鼠标指针移离元素,使其保持悬停状态 .
通过键盘选择检查元素,如按向上箭头,然后按Enter键 .
查看匹配CSS规则下的开发人员工具,您应该能够看到:悬停 .
PS:我在你的一个问题标签上尝试了这个 .
在Chrome中更改为 hover 状态非常简单,只需按照以下步骤操作即可:
1)在您的页面中 Right click 并选择检查
2)在 DOM 中选择您要检查的元素
3)选择图钉图标(切换元素状态)
4)然后勾选 hover
现在,您可以在浏览器中看到所选 DOM 的悬停状态!
我认为这不再是Chrome中的问题,只是以防万一 . 当我使用TAB键移动时,我写了这个jQuery script以检查DOM .
如果更改为使用'mouseover',则如下所示:
只要单击或对要停止的元素执行某些操作,就可以轻松修改它以删除事件处理程序 .
现在,您可以看到伪类规则并强制它们在元素上 .
要在“样式”窗格中查看类似
:hover
的规则,请单击右上角的小:hov
文本 .要强制元素进入
:hover
状态,请右键单击它 .关于elements panel的其他提示Chrome Developer Tools Shortcuts .
如果它有帮助,这在最新的Chrome(47.0.2526.106)中似乎更容易:
检查元素,然后单击左侧装订线中的三个白点:
然后从此下拉列表中选择所需的元素状态:
我知道我所做的就是解决方法,但是它完美无缺,这就是我每次都这样做的方式 .
然后,继续这样:
首先确保Chrome开发者工具已取消停靠 .
然后,只需将Dev Tools窗口的任意一侧移动到要悬停时要检查的元素的中间位置 .
最后,悬停元素,右键单击并检查元素,将鼠标移动到开发工具窗口,您就可以使用元素:hover css .
干杯!
我可以通过遵循Babiker建议的以下步骤来看到样式 - “右键单击元素,但不要将鼠标指针移离元素,使其保持悬停状态 . 通过键盘选择检查元素,如在向上箭头和然后输入密钥 . “
要更改样式,请按照上述步骤操作,然后按键盘上的ctrl TAB更改浏览器选项卡 . 然后单击要调试的选项卡 . 你的悬停屏幕仍然在那里 . 现在小心地将鼠标移到开发人员工具区域 .
我认为没有办法做到这一点 . 我提交了 a feature request . 如果有办法,谷歌的开发人员会勉强指出它,我会编辑我的答案 . 如果没有,我们将不得不等待观看 . (你可以为问题加注星标投票)
(截至本文)当前Stable channel版本为8.0.552.224 .
您可以使用Beta channel或Dev channel替换_135927_安装的Google Chrome(请参阅Early Access Release Channels) .
您也可以安装secondary installation of chrome that is even more up to date than the Dev channel .
我想在Bootstrap工具提示上看到悬停状态 . 强制Chrome浏览器中的:悬停状态工具没有创建所需的输出,但是通过控制台触发mouseenter事件在Chrome中起了作用 . 如果页面上存在jQuery,则可以运行:
我正在使用Chrome调试菜单
hover
状态并执行此操作以查看悬停状态代码:在
Elements
面板中单击Toggle Element state
按钮并选择:hover
.在
Scripts
面板中,转到右下方的Event Listeners Breakpoints
并选择Mouse -> mouseup
.现在检查菜单并选择所需的框 . 释放鼠标按钮时,它应该停止并在
Elements
面板中显示所选的元素悬停状态(查看Styles
部分) .在我的情况下,我想dubug bootstrap工具提示 . 但上面的方法对我不起作用 . 我想bootstrap通过鼠标输入/输出事件实现了这一点 .
无论如何,什么时候我将鼠标悬停在一个按钮上,它会在按钮下面生成一个兄弟html元素,所以我在“Developer tools”窗口的“Elements”选项卡中选择按钮的父元素,将鼠标悬停在按钮上,然后“Ctrl C”,然后我就可以粘贴了包含生成代码的源代码 . 最后找到生成的代码,并通过“Elements”选项卡中的“Edit as HTML”将其添加到源代码中 .
希望它可以帮助某人 .