4

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.

Community
  • 1
  • 1
MasterScrat
  • 7,090
  • 14
  • 48
  • 80

2 Answers2

3

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.
    enter image description here
  2. With the element selected, click the "Toggle Element State" pin icon at the top of the styles panel.
    enter image description here
  3. Pin the :hover state. See that the selector and rules that define the :hover state now appear.
    enter image description here
  4. Disable individual rules as needed to achieve your goal.
    enter image description here
  5. Unpin the :hover state.
    enter image description here

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.

gfullam
  • 11,531
  • 5
  • 50
  • 64
  • Quite cumbersome :-/ There should be a built-in way... But thanks for the tip! – MasterScrat Oct 21 '15 at 09:43
  • This *is* the built-in way, so to speak. Chrome just doesn't make any assumptions about which styles you want to disable, so it let's you selectively disable them. But, there is no built-in way,per se, to turn them all off or on *at once*. – gfullam Oct 21 '15 at 14:09
  • 1
    An alternative solution that you may like is to apply `pointer-events: none` to the target element's rule in the developer tools. This would preclude any `:hover` events from being invoked and it gets the job done *at once*. – gfullam Oct 21 '15 at 14:11
  • ooh that's highly interesting! you should make a separate answer for that solution – MasterScrat Oct 21 '15 at 14:25
3

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.
    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.
    enter image description here
  3. A text input will appear. Enter pointer-events: none;.
    enter image description here
    enter image description here
  4. You may now toggle this property by disabling/enabling it as normal.
    enter image description here

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.

gfullam
  • 11,531
  • 5
  • 50
  • 64