Sorry for poor English, it is not my first language.

I have made a toggle button which shows specific information by clicking it(javascript here).
This button has CSS:hover and I want to disable it when I click the toggle button. And CSS:hover function needs to be back when user hovers the button again.

Is there any way to disable CSS:hover functionally? Please let me know if you need more info to it.

Current Javascript

let logStyle = document.getElementById("log").style;
let levelStyle = document.getElementById("level").style;
let log = document.getElementById("log");
let level = document.getElementById("level");

odium.addEventListener("mouseover", function (event) {
  logStyle.display = "block";
  logStyle.animation = "fadein .3s";
  levelStyle.display = "block";
  levelStyle.animation = "fadein .3s";
}, false);

odium.addEventListener("mouseout", function (event) {
    logStyle.display = "none";
    levelStyle.display = "none";
}, false); 

odium.addEventListener("click", function (event) {
  log.classList.toggle('active');
  level.classList.toggle('active');
}, false);

Toggle button CSS

#header nav img:hover {
  transform: scale(1.2);
}
}

#log.active{
  display: flex !important;
  animation: fadein .3s !important;
}

Current HTML

        <header id="header">
          <nav> 
            <ul>
              <li>
                <img id="symbol1" src="assets/css/images/symbol-odium.png" style="cursor: pointer;"/><span
                  id="level"
                ></span>
              </li>
            </ul>
          </nav>
          <p id="nowValue" ></p>
          <div id="log" >
            <ul>
              <li><a href="javascript:void(0);" id="oneHundred"  onclick="valueToggle100(); return false;"></a></li>
              <li><a href="javascript:void(0);" id="eighty"  onclick="valueToggle80(); return false;">230104</a></li>
            </ul>
          </div>
        </header>

CodePudding user response：

To disable the hover effect, you can remove the CSS :hover selector from the stylesheet or set the pointer-events property to none for the element.

For example, you can change the CSS to:

#header nav img {
  transform: scale(1);
  pointer-events: none;
}

CodePudding user response：

It took me a while to understand what you need: a two- or tri-state action button.

1. hover: grow to look elevated
2. active: shrink to original elevation
3. focus: [OPTIONAL] shrink to look pressed elevation

Option 3) has only real effect when the element is a <button> or an <input type="button">. In general: an element that can receive focus, where buttons seem the most logical choice.

The snippet shows some simplified code of how it's done, with a bit more subtle action:

.button_img { cursor: pointer }

.button_img:hover              { transform: scale(1.03) }
.button_img:active:not(:focus) { transform: scale(1)    }
.button_img:focus              { transform: scale(0.98) }

<img  src="https://picsum.photos/74?random">