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

Question

I am aware you can force the :hover state on an element from the Dev Tools (see eg: See :hover state in Chrome Developer Tools ).

I am looking to do the opposite: preventing an element from having the :hover state applied even though the cursor is over it.

That way I could use the element picker on elements that disappear on hover.

Answer 1

Disable styles individually while :hover is in pinned state

1. Because you want to use the element picker on elements that disappear on hover, you will need to open Chrome Developer tools and manually navigate the DOM tree to the target element node.
   
2. With the element selected, click the "Toggle Element State" pin icon at the top of the styles panel.
   
3. Pin the :hover state. See that the selector and rules that define the :hover state now appear.
   
4. Disable individual rules as needed to achieve your goal.
   
5. Unpin the :hover state.
   

You have now disabled some or all of the rules applied to your element's :hover state. You can selectively turn these back on by following the steps above and enabling some or all of the rules.

Answer 2

Apply pointer-events: none to the target element

1. Because you want to use the element picker on elements that disappear on hover, you will need to open Chrome Developer tools and manually navigate the DOM tree to the target element node.
   
2. With the element selected, from the styles panel click somewhere near the closing bracket of the target rule to insert a new property. I recommend using the element.style rule to achieve the greatest specificity.
   
3. A text input will appear. Enter pointer-events: none; .
   
   
4. You may now toggle this property by disabling/enabling it as normal.
   

While enabled, this precludes the invocation of any :hover rules applied to the target element.

Caveat: Because hover events are suppressed, the closest you'll be able to get with the element picker is the target element's parent.