对我来说，为了调试这个工具提示，我点击切换设备工具栏切换到移动视图，然后点击有悬停效果的div，你也可以点击焦点可见来查看div和工具提示之间的间距，希望这将有所帮助。

我可以通过遵循Babiker建议的以下步骤来看到风格 右键单击元素，但不要将鼠标指针移离该元素，保持悬停状态。通过键盘选择检查元素，就像点击箭头，然后回车键。”

改变风格遵循以上步骤，然后- 通过按键盘上的ctrl + tab来更改浏览器选项卡。 然后单击要调试的选项卡。你的悬停屏幕仍然在那里。现在小心地将鼠标移到开发人员工具区域。

现在可以看到两个伪类规则，并将它们强加到元素上。

要查看样式窗格中的:hover之类的规则，单击右上方的小:hov文本。

要强制一个元素进入:hover状态，右键单击它并选择:hover。

在Chrome开发人员工具快捷方式的元素面板上的额外提示。

我知道我所做的是相当的变通，但它工作完美，这是我每次都做的方式。

然后，像这样进行:

首先确保Chrome开发工具是未停靠的。 然后，将Dev Tools窗口的任意一侧移动到你想要检查的元素中间。

最后，悬停元素，右键单击并检查元素，将鼠标移动到开发工具窗口，你将能够玩你的元素:悬停css。

干杯!

在我的情况下，我想dubug引导工具提示。但是上面的方法对我不起作用。我猜bootstrap通过鼠标in/out事件实现了这一点。

无论如何，当我悬停在一个按钮上时，它会在按钮下面生成一个兄弟html元素，所以我在“开发人员工具”窗口的“元素”选项卡中选择按钮的父元素，悬停按钮，然后“Ctrl + C”，然后我可以粘贴包含生成代码的源代码。最后找到生成的代码，并通过“元素”选项卡中的“编辑为HTML”将其添加到源代码中。

希望它能帮助到一些人。

对我来说，为了调试这个工具提示，我点击切换设备工具栏切换到移动视图，然后点击有悬停效果的div，你也可以点击焦点可见来查看div和工具提示之间的间距，希望这将有所帮助。