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

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

希望它能帮助到一些人。

我用Chrome调试菜单悬停状态，这样做是为了能够看到悬停状态代码:

在元素面板上点击切换元素状态按钮并选择:悬停。

在“脚本”面板中，选择右下角的“事件侦听器断点”，然后选择鼠标->鼠标。

现在检查菜单并选择您想要的方框。当你释放鼠标按钮时，它应该会停止，并在元素面板中显示所选元素的悬停状态(请参阅样式部分)。

在Chrome浏览器中更改悬停状态非常简单，只需遵循以下步骤:

1)在你的页面上右键点击，选择检查

2)在DOM中选择你想检查的元素

3)选择引脚图标(Toggle Element State)

4)然后勾选悬停

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

It's also possible that the code can be hidden in the database and there is no actual file containing it. A client of mine has the "Travelify" theme by Colorlib and some of the options from the WP admin GUI write directly to the DB and the DB generates the css code on the fly - I can see the css in html source but nowhere in any actual files. This drove me crazy and took me awhile to figure out. There's a great DB search tool for WP called "Search and Replace" by Inpsyde GmbH that I have found to be invaluable. Be careful with it of course!

干杯!

我认为这在Chrome中不再是一个问题，只是以防万一。我写了这个jQuery脚本，当我用TAB键移动时检查DOM。

如果更改为使用'mouseover'，将看起来像这样:

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

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

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

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