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

Question

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

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

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

Answer 1

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

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

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

Answer 2

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

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

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

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