How to Disable a CSS :Hover Effect Via JavaScript

Can I disable a CSS :hover effect via JavaScript?

There isn’t a pure JavaScript generic solution, I’m afraid. JavaScript isn’t able to turn off the CSS :hover state itself.

You could try the following alternative workaround though. If you don’t mind mucking about in your HTML and CSS a little bit, it saves you having to reset every CSS property manually via JavaScript.

HTML

<body class="nojQuery">

CSS

/* Limit the hover styles in your CSS so that they only apply when the nojQuery 
class is present */

body.nojQuery ul#mainFilter a:hover {
    /* CSS-only hover styles go here */
}

JavaScript

// When jQuery kicks in, remove the nojQuery class from the <body> element, thus
// making the CSS hover styles disappear.

$(function(){}
    $('body').removeClass('nojQuery');
)

How to disable Hover effect on CSS?

Here is what you can do:

ul {  list-style-type: none;  margin: 0;  padding: 0;  overflow: hidden;  background-color: darkslategray;}
li {  float: left;}
li a {  display: block;  color: white;  text-align: center;  padding: 10px;  text-decoration: none;}
li a:hover {  background-color: cadetblue;}
#sty {  border: 2px solid cadetblue;  border-radius: 50px;  outline: none;}
#nohvr {  background-color: unset;}

<body>
  <ul>    <li><a href="#home"><i class="fas fa-home"></i></a></li>    <li><a href="#">News</a></li>    <li><a href="#">Contact</a></li>    <li><a href="#">About</a></li>    <li style="float: right;">      <a id="nohvr" href="#">        <label>            <input id="sty" type="search">        </label>Search</a>    </li>    <li style="float: right;"><a href="#">Register</a></li>    <li style="float: right;"><a href="#">Login</a></li>  </ul>
</body>

Remove all hover effects through css

Update

This is now supported very decent across all mobile browsers, here is the Can I use link:

html.touch *:hover {
    all:unset!important;
}

Old answer

This is good but not supported very well:

html.touch *:hover {
    all:unset!important;
}

But this has a very good support:

html.touch *:hover {
    pointer-events: none !important;
}

Works flawless for me, it makes all the hover effects be like when you have a touch on a button it will light up but not end up buggy as the initial hover effect for mouse events.

How do I remove :hover?

Apply two classes to the relvant element. one contains the hover behaviour, and one contains all the other styling.

You can then use the jquery

$(element).removeClass('hover');

method to remove the class with the hover behaviour and then apply whatever you want using

$(element).bind('mouseover', function () { doSomething(); });
$(element).bind('mouseout', function () { doSomething(); });

How to temporarily disable hover during a .animate command?

You can introduce new class
Use it to play with hover
Remove class when you start animation
Add class back when animation ends

For example, change JS code to code below:

const navIds = ['#navDown', '#navUp', '#navRight', '#navLeft'];

function onAnimateStart() {
  for (const id of navIds) {
    $(id).removeClass('hoverOn');
  }
}

function onAnimateComplete() {
  for (const id of navIds) {
    $(id).addClass('hoverOn');
  }
}

$('#button').click(function() {
  onAnimateStart();
  if ($(this).attr("trigger")==="0") {
    $('#navDown').animate({"top":"90%"}, 600);
    $('#navUp').animate({"top":"10%"}, 600);
    $('#navRight').animate({"left":"10%"}, 600);
    $('#navLeft').animate({"left":"90%"}, 600, function() {
      onAnimateComplete()
    });
    $(this).attr("trigger","1");
  } else {
    $('#navUp').animate({"top":"50%"}, 600);
    $('#navDown').animate({"top":"50%"}, 600);
    $('#navLeft').animate({"left":"50%"}, 600);
    $('#navRight').animate({"left":"50%"}, 600, function() {
      onAnimateComplete();
    });
    $(this).attr("trigger","0");
  }
});

Change CSS part

.centreNav:hover{
    transition: 0.25s;
    width: 105px;
    height: 105px;
    border:2px solid white;
}

To:

.hoverOn:hover {
    transition: 0.25s;
    width: 105px;
    height: 105px;
    border: 2px solid white;
}

HTML part to (basically add hoverOn to your centreNav elements):

<div id="containerCent">
  <a id="button" trigger="0" href="#"><img src="images/Logo.png" alt=" logo"></a>           

  <div id="spiralNav">
    <a href="#">
      <div id="navUp" class="centreNav hoverOn">
        <h2></h2>
      </div>
    </a>

    <a href="#">
      <div id="navLeft" class="centreNav hoverOn">
        <h2></h2>
      </div>
    </a>

    <a href="#" target="_blank">
      <div id="navRight" class="centreNav hoverOn">
        <h2></h2>
      </div>
    </a>

    <a href="#">
      <div id="navDown" class="centreNav hoverOn">
        <h2></h2>
      </div>
    </a>
    </div>
</div>

JSFiddle with all changes from above:
https://jsfiddle.net/g3p2erfo/