在Chrome开发者工具中查看:hover状态

使用JS可以触发元素上的MouseEvent。以下是如何为hover执行此操作。

1. 右键单击元素并检查。
2. 复制JS路径，例如。
3. 按“Esc”键打开Chrome DevTools中的控制台。
4. 然后将复制的路径粘贴并附加.dispatchEvent(new MouseEvent('mouseover', { 'bubbles': true }));，如下所示：。
5. 按Enter键，然后您可以与悬停状态后发生的任何DOM更改进行交互。

我认为在Chrome中这已经不是一个问题了，但以防万一。我编写了这个jQuery 脚本，用于在使用TAB键移动时检查DOM。

如果改为使用“mouseover”，则会像这样：

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

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

我可以通过以下步骤来查看样式，这是Babiker建议的方法 - “右键单击元素，但不要将鼠标指针移开元素，保持悬停状态。通过键盘选择检查元素，即按上箭头，然后按Enter键。”
要更改样式，请按照上述步骤操作，然后 - 通过键盘按下ctrl + TAB键切换浏览器选项卡。 然后单击要调试的选项卡上。您的悬停屏幕仍将存在。现在请小心将鼠标移到开发人员工具区域。

在我的情况下，我想调试Bootstrap工具提示。但是上面的方法对我不起作用。我猜测Bootstrap是通过类似于鼠标进入/离开事件来实现这一点的。

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

希望这可以帮助某些人。

代码也可能被隐藏在数据库中，而没有实际包含它的文件。我的一个客户使用了Colorlib的“Travelify”主题，WP管理GUI中的一些选项直接写入数据库，数据库会即时生成CSS代码 - 我可以在HTML源代码中看到CSS，但在任何实际文件中都找不到。这让我疯狂了一段时间才弄清楚。有一个非常好用的WP数据库搜索工具叫做“Inpsyde GmbH”的“搜索和替换”，我发现它非常有价值。当然要小心使用！

干杯！