禁用：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. 选择元素后，单击＆＃34;切换元素状态＆＃34;样式面板顶部的图钉图标 enter image description here
  3. 固定:hover州。请参阅现在出现定义:hover状态的选择器和规则 enter image description here
  4. 根据需要禁用个别规则以实现目标 enter image description here
  5. 取消固定:hover州 enter 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规则。

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

相关问题
最新问题