禁用:Chrome开发者工具中的悬停状态

时间:2015-10-06 13:18:57

标签: html css google-chrome hover google-chrome-devtools

我知道你可以在开发工具的某个元素上强制:hover状态(参见例如:See :hover state in Chrome Developer Tools)。

我希望做相反的事情: 阻止元素应用:hover状态,即使光标在它上面。

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

2 个答案:

答案 0 :(得分:3)

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

  1. 由于您希望在悬停时消失的元素上使用元素选择器,因此您需要打开Chrome Developer工具并手动将DOM树导航到目标元素节点。
    enter image description here
  2. 选择元素后,单击"切换元素状态"样式面板顶部的图钉图标 enter image description here
  3. 固定:hover州。请参阅现在出现定义:hover状态的选择器和规则 enter image description here
  4. 根据需要禁用个别规则以实现目标 enter image description here
  5. 取消固定:hoverenter image description here
  6. 您现在已禁用部分或全部应用于元素:hover状态的规则。您可以按照上述步骤选择重新启用这些步骤,并启用部分或全部规则。

答案 1 :(得分:2)

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

  1. 由于您希望在悬停时消失的元素上使用元素选择器,因此您需要打开Chrome Developer工具并手动将DOM树导航到目标元素节点。
    Open Chrome Developer tools and manually navigate the DOM tree to the target element node
  2. 选择元素后,从样式面板中单击目标规则右括号附近的某处以插入新属性。我建议使用element.style规则来获得最大的特异性 enter image description here
  3. 将显示文本输入。输入pointer-events: none;
    enter image description here
    enter image description here
  4. 您现在可以通过正常禁用/启用来切换此属性 enter image description here
  5. 启用后,这会阻止调用应用于目标元素的任何:hover规则。

    警告:由于悬停事件被抑制,因此元素选择器最接近的是目标元素的父级。