请参阅：Chrome开发人员工具中的悬停状态

StackOverflow https://stackoverflow.com/questions/4515124

题

我想看 :hover 我在Chrome中徘徊的锚风格。在Firebug中，有一个样式下拉列表，使我可以为元素选择不同的状态。我似乎在Chrome中找不到类似的东西。我想念什么吗？

有帮助吗？

解决方案

现在，您可以看到Psuedo级规则，并强迫它们依靠元素。

看到类似的规则 :hover 在样式中，窗格单击小 :hov 文字在右上角。

Toggle element state

迫使元素进入 :hover 状态，右键单击它。

Force element state

关于 元素面板 在 Chrome开发人员工具快捷方式.

其他提示

编辑：此答案是在错误修复之前，请参阅tnothcutt的答案。

这有点棘手，但是这里有：

  • 右键单击元素，但不要将鼠标指针从元素中移开，请将其保持在悬停状态。
  • 通过键盘选择Inspect元素，如击中箭头，然后输入键。
  • 在匹配的CSS规则下查看开发人员工具，您应该能够看到：悬停。

PS：我在您的一个问题标签之一上尝试了这一点。

我想在Bootstrap Tooltips上看到悬停状态。在Chrome Dev工具中强迫：悬停状态并未创建所需的输出，而是通过控制台触发Mouseenter事件在Chrome中做到了困难。如果在页面上存在jQuery，则可以运行：

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

Forcing hover or mouseenter for Bootstrap Tooltips

有几种观看的方法 悬停州 Chrome开发人员工具中的样式。

方法01

enter image description here

方法02

enter image description here

使用Firefox默认开发人员收费

enter image description here

带有火焰

enter image description here

如果有帮助的话，这在最新的铬（47.0.2526.106）中似乎更容易：

检查元素，然后单击左下水沟中的三个白点：
click on the three white dots

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

我认为没有办法做到这一点。我提交了 功能请求. 。如果有办法，Google的开发人员将指出这一点，我将编辑答案。如果没有，我们将不得不等待观看。 （您可以将问题播放为投票）

评论1 Chrome Project成员: ：在10.0.620.0中，样式面板显示了：所选元素的悬停样式，但没有：Active。

（从本文开始）当前 稳定的频道 版本为8.0.552.224。

你可以更换你的 稳定的频道 与 beta频道 或者 开发频道 （看 早期访问发布渠道).

您也可以安装 铬的次要安装比开发频道更加最新.

...金丝雀构建比开发频道更频繁地更新，并且在发布之前未进行测试。由于金丝雀构建有时可能无法使用，因此不能将其设置为默认浏览器，并且除了上述任何Google Chrome的频道外，还可以安装。 ...

我知道我要做的是解决方法，但是它可以很好地工作，这就是我每次都这样做的方式。

Undock Chrome Developer Tools

然后，这样做：

  • 首先确保Chrome Developer工具不可固定。
  • 然后，只需将开发工具窗口的任何一侧移至悬停时要检查的元素中间即可。

Hover on element

  • 最后，将元素悬停，右键单击并检查元素，将鼠标移至Dev Tools窗口中，您将能够使用元素：Hover CSS。

干杯!

我在调试菜单 hover 用Chrome表示，这样做是为了查看悬停状态代码：

在里面 Elements 面板单击 Toggle Element state 按钮并选择 :hover.

在里面 Scripts 面板去 Event Listeners Breakpoints 在右下角，选择 Mouse -> mouseup.

现在检查菜单，然后选择所需的框。发布鼠标按钮时，它应该停止并向您显示所选元素悬停状态 Elements 面板（看看 Styles 部分）。

我可以通过遵循Babiker建议的以下步骤来看到样式 - “右键单击元素，但不要将鼠标指针从元素中移开，将其放在悬停状态下。通过键盘选择Inspect Element，如hit Up Arrow和然后输入密钥。”

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

更改为 徘徊 Chrome中的状态非常容易，只需以下以下步骤：

1) 右键点击 在您的页面中选择检查

enter image description here

2）选择您喜欢检查的元素 dom

enter image description here

3）选择针图标 enter image description here （切换元素状态）

4）然后打勾 徘徊

现在您可以看到所选的悬停状态 dom 在浏览器中！

就我而言，我想笨拙的bootstrap工具提示。但是上面的方法对我不起作用。我猜Bootstrap通过鼠标IN/OUT事件之类的东西实现了此功能。

无论如何，当我悬停在按钮上时，它将在按钮下方生成兄弟html元素，因此我在“开发人员工具”窗口的“元素”选项卡中选择按钮的partent element，悬停按钮和“ ctrl + c”，然后，我可以粘贴包含生成代码的源代码。最后查找生成的代码，然后将其添加到“ elements”选项卡中的“编辑为html”中的源代码中。

希望它可以帮助某人。

我认为这不再是Chrome的问题，而是以防万一。我写了这个杂音 脚本 当我使用Tab键移动时，检查DOM。

如果更改为使用“ mouseover”，则看起来像这样：

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

您可以在单击或在要停止的元素上进行操作时轻松修改它以删除事件处理程序。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top