Remove ':hover' CSS behavior from element

Extending the removal of hover

Sometimes, just countering the hover effect may not sail your boat. You need something more rigid, unyielding, pretty much like your :hover. Here are a few strategies:

1. Pointer Events: You can play 'statue' with the element by using pointer-events: none;. The element won't budge on hover or click:

   .no-hover {
     pointer-events: none; /* "I am a statue, nothing can move me!" */
   }
   

2. Disabled Class: Establish an 'Immunity Passport' for elements by defining a .disabled class. Use it wherever you want hover freedom:

   .disabled:hover {
     background: original-background;
     pointer-events: none; /* Immunity passport for elements */
   }
   

3. Selective Hover Removal: Want to play favorites with your elements? Salute the :not() pseudo-class! It helps you choose who gets the hover:

   .element:not(.no-hover):hover {
     /* ...hover styles; "VIP :hover access granted!" */
   }
   

4. Aesthetic Disabled Effect: Silence isn't always evident. For those scenarios, create a blend of pointer-events: none; for the back-end and opacity: 0.2; for the front-end to create a 'disabled' visual impression.

5. Targeted Overrides: If you need to rephrase a specific hover effect, narrow down your rules. They should be so specific they could find a needle in a haystack.

Taking the steer of hover effects

"Hover-cover" approach

Think of the :hover as a blanket over an element. To remove it doesn't mean burning the blanket. Instead, just add another blanket (element) on top. Make sure your new blanket is as chilled out as summertime - pointer-events: none, and for good measure, make it cozy and a bit transparent (opacity: 0.5).

.top-layer:hover {
  pointer-events: none; /* "Summertime, and the livin's easy" */
  opacity: 0.5;
  /* I'm the attention seeker here */
  z-index: 100;
}


JavaScript - When style needs a bit of dynamism

For a more dynamic scenario, where CSS monologues seem insufficient, make it an interactive play with JavaScript. Add and remove classes controlling hover states on the go:

document.querySelector('.element').classList.add('no-hover'); // ".no-hover, Here I come!"


And the corresponding CSS class could be something like:

.no-hover:hover {
  /* No hover styles; "File not Found: hover.css." */
}


Nifty practical examples

To truly harness the power of these pointers, why just read, when you can DO and LEARN? Get your hands dirty with some practical examples, such as JSFiddle, in the references section.