logo标签列表

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

htmlcssgoogle-chromehovergoogle-chrome-devtools
4
我知道你可以从开发者工具中强制激活一个元素的:hover状态（例如：参见在Chrome开发者工具中查看:hover状态）。
我想要做相反的事情：防止一个元素即使有鼠标悬停时也不产生:hover状态。
这样我就可以使用元素选择器来选取那些在悬停时消失的元素了。
2个回答
3

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

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

在启用时，这将排除应用于目标元素的任何:hover规则的调用。

注意：由于悬停事件被抑制，因此您能够使用元素选择器最接近的是目标元素的父元素。

3

当:hover处于固定状态时，逐个禁用样式

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

您现在已经禁用了元素的:hover状态中的一些或全部规则。您可以按照上述步骤选择性地重新启用一些或全部规则。

非常繁琐 :-/ 应该有一种内置的方法... 但还是谢谢你的提示！ - MasterScrat
这 是 所谓的内置方式。Chrome只是不会做出任何关于您想要禁用哪些样式的假设，因此它允许您有选择地禁用它们。但是，并没有内置的方法可以一次性全部打开或关闭。 - gfullam
1
一个你可能喜欢的替代方案是在开发者工具中将 pointer-events: none 应用于目标元素的规则。这将排除任何 :hover 事件的调用，并且可以立即完成工作。 - gfullam
哦，那非常有趣！你应该为那个解决方案单独创建一个答案。 - MasterScrat
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接