在 Chrome 开发者工具中禁用 :hover 状态

Disable :hover state in Chrome Developer Tools

我知道您可以通过开发工具强制元素处于 :hover 状态（参见示例：See :hover state in Chrome Developer Tools）。

我想做相反的事情：防止元素应用:hover状态，即使光标结束了。

这样我就可以在悬停时消失的元素上使用元素选择器。

在 `:hover` 处于固定状态时单独禁用样式

因为您想在悬停时消失的元素上使用元素选择器，所以您需要打开 Chrome 开发人员工具并手动将 DOM 树导航到目标元素节点。
选择元素后，单击样式面板顶部的 "Toggle Element State" 图钉图标。
固定 :hover 状态。看到定义 :hover 状态的选择器和规则现在出现了。
根据需要禁用个别规则以实现您的目标。
取消固定 :hover 状态。

您现在已经禁用了部分或全部 应用于元素:hover 状态的规则。您可以按照上述步骤并启用部分或全部规则，有选择地重新启用这些规则。

将`pointer-events: none`应用到目标元素

因为您想在悬停时消失的元素上使用元素选择器，所以您需要打开 Chrome 开发人员工具并手动导航 DOM 树到目标元素节点。
选择元素后，在样式面板中单击目标规则右括号附近的某处以插入新的属性。我建议使用 element.style 规则来实现最大的特异性。
将出现文本输入。输入 pointer-events: none;.
您现在可以通过 disabling/enabling 正常切换此属性。

启用后，这会阻止调用任何应用于目标元素的 :hover 规则。

警告：由于悬停事件被抑制，您可以使用元素选择器获得的最接近目标元素的父元素。