请参阅:Chrome开发者工具中的悬停状态

时间:2010-12-23 01:16:54

标签: css google-chrome hover state google-chrome-devtools

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

12 个答案:

答案 0 :(得分:1174)

现在你可以看到psuedo-class规则并强制它们在元素上。

要在“样式”窗格中查看:hover等规则,请点击右上角的小:hov文字。

Toggle element state

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

Force element state

elements panelChrome Developer Tools Shortcuts的其他提示。

答案 1 :(得分:53)

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

这有点棘手,但这里有:

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

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

答案 2 :(得分:26)

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

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

Forcing hover or mouseenter for Bootstrap Tooltips

答案 3 :(得分:13)

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

方法01

enter image description here

方法02

enter image description here

使用Firefox Default Developer Toll

enter image description here

使用Firebug

enter image description here

答案 4 :(得分:7)

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

检查元素,然后单击左侧装订线中的三个白点:
click on the three white dots

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

答案 5 :(得分:4)

我认为没有办法做到这一点。我提交了 a feature request 。如果有办法,谷歌的开发人员会勉强指出它,我会编辑我的答案。如果没有,我们将不得不等待观看。 (你可以为问题加注星标投票)


  

Comment 1 by Chrome project member:在10.0.620.0中,“样式”面板显示所选元素的:悬停样式,但不显示:活动。


(截至本文)当前Stable channel版本为8.0.552.224。

您可以使用Stable channelBeta channel替换Dev channel 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浏览器的任何渠道外,还可以安装。 ...

答案 6 :(得分:3)

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

Undock Chrome Developer Tools

然后,继续这样:

  • 首先确保Chrome开发者工具已取消停靠。
  • 然后,只需将Dev Tools窗口的任何一侧移动到要悬停时要检查的元素的中间位置。

Hover on element

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

干杯!

答案 7 :(得分:2)

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

Elements面板中点击Toggle Element state按钮,然后选择:hover

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

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

答案 8 :(得分:1)

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

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

答案 9 :(得分:1)

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

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

enter image description here

2)在 DOM

中选择您要检查的元素

enter image description here

3)选择图钉图标enter image description here(切换元素状态)

4)然后勾选悬停

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

答案 10 :(得分:1)

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

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

希望它可以帮助某人。

答案 11 :(得分:0)

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

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

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

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