title: how to disable 'hover' in CSS using JS
body: <p>I tried to change color when i clicked button.
  expect active is
  if there is no class 'clicked', clicked button is change color gray to red, and others change color has to be gray.
  else if there is class 'clicked', no change anything.</p>
  <p>below is my code.
  it added class 'clicked' and change color.
  <strong>but problem is 'hover'.</strong></p>
  <p>because of icon:hover i get to know move mouse the other position
  if i clicked icon and don't move mouse. i can't see the color red.</p>
  <p>how to disable hover in JS temporaly.</p>
  <p>HTML</p>
  <pre><code>&lt;nav class=&quot;navbar&quot;&gt;
          &lt;a href=&quot;index.html&quot; class=&quot;backToHome&quot;&gt;home&lt;/a&gt;
          &lt;div class=&quot;upperNav&quot;&gt;
              &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fas fa-user clicked&quot;&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fas fa-comment&quot;&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fas fa-ellipsis-h&quot;&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class=&quot;lowerNav&quot;&gt;
              &lt;button class=&quot;bell&quot;&gt;&lt;i class=&quot;fas fa-bell&quot;&gt;&lt;/i&gt;&lt;/button&gt;
              &lt;i class=&quot;fas fa-bell-slash&quot;&gt;&lt;/i&gt;
              &lt;button clsss=&quot;setting&quot;&gt;&lt;i class=&quot;fas fa-cog&quot;&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.navbar .upperNav{
      display : flex;
      flex-direction : column;
      align-items: center;
      justify-content : space-between;
  
      margin-top : 60px;
  }
  .navbar .upperNav i{
      font-size: 25px;
      margin : 10px 0;
      color : var(--color-leftNavIcons);
  }
  .navbar .upperNav i:hover{
      color : var(--color-leftNavIcons-hover);
  }
  
  .navbar .upperNav .clicked{
      color : red;
  }
  </code></pre>
  <p>JavaScript</p>
  <pre><code>const btn_friends = document.querySelector(&quot;.fa-user&quot;),
      btn_chats = document.querySelector(&quot;.fa-comment&quot;),
      btn_more = document.querySelector(&quot;.fa-ellipsis-h&quot;);
  
  const color_red = &quot;rgb(255, 0, 0)&quot;,
      color_white = &quot;rgb(255, 255, 255)&quot;,
      color_gray = &quot;rgb(158, 158, 158)&quot;;
  
  
  function handleNavBarBtn(event){
  
      if(event.target.classList.contains(&quot;clicked&quot;)){
          
      }
      else if(!event.target.classList.contains(&quot;clicked&quot;)){
          if(event.target.classList.contains(&quot;fa-user&quot;)){
              btn_friends.classList.add(&quot;clicked&quot;);
              btn_chats.classList.remove(&quot;clicked&quot;);
              btn_more.classList.remove(&quot;clicked&quot;);
              
          }
          else if(event.target.classList.contains(&quot;fa-comment&quot;)){
              btn_friends.classList.remove(&quot;clicked&quot;);
              btn_chats.classList.add(&quot;clicked&quot;);
              btn_more.classList.remove(&quot;clicked&quot;);
          }
          else if(event.target.classList.contains(&quot;fa-ellipsis-h&quot;)){
              btn_friends.classList.remove(&quot;clicked&quot;);
              btn_chats.classList.remove(&quot;clicked&quot;);
              btn_more.classList.add(&quot;clicked&quot;);
          }
      }
  }
  
  function init(){
      btn_friends.addEventListener(&quot;click&quot;,handleNavBarBtn);
      btn_chats.addEventListener(&quot;click&quot;,handleNavBarBtn);
      btn_more.addEventListener(&quot;click&quot;,handleNavBarBtn);
  }
  
  init();
  </code></pre>