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

Posted 2023-02-22

【中文标题】在 Chrome 开发者工具中禁用 :hover 状态

【英文标题】：Disable :hover state in Chrome Developer Tools

【发布时间】：2016-01-03 10:26:44

【问题描述】：

我知道您可以从开发工具中强制元素上的 :hover 状态（参见例如：See :hover state in Chrome Developer Tools）。

我希望做相反的事情：防止一个元素应用:hover 状态，即使光标在它上面。

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

【参考方案1】：

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

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

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

【讨论】：

相当麻烦 :-/ 应该有内置的方式...不过谢谢提示！

这是内置方式，可以这么说。 Chrome 不会对您要禁用的样式做出任何假设，因此它可以让您有选择地禁用它们。但是，就其本身而言，没有内置的方法可以一次性全部关闭或开启。

您可能喜欢的另一种解决方案是将pointer-events: none 应用于开发人员工具中的目标元素规则。这将阻止任何:hover 事件被调用，并且它立即完成工作。

哦，这非常有趣！您应该为该解决方案单独回答

【参考方案2】：

对目标元素应用pointer-events: none

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

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

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