title: Editing styles with JavaScript disables CSS `:hover` selector
body: <p>I'm displaying a simple box over an image, I want it to highlight when hovered over and change colour when clicked.</p>
  <p>I've got it to highlight when hovered over and change colour when clicked.The problem is that after changing colour the first time it no longer highlights when hovered over. It seems when the JS changes the styles it disables the CSS hover selector.</p>
  <p>How can I keep the hover highlighting working?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const box = document.getElementsByClassName("box")[0];
  box.addEventListener("click", (e) =&gt; {
    // console.log(e);
    if (e.target.style.backgroundColor == "rgba(255, 0, 0, 0.1)") {
      e.target.style.backgroundColor = "rgba(0, 255, 0, 0.1)";
      e.target.style.borderColor = "rgba(0, 255, 0, 0.4)";
    } else {
      e.target.style.backgroundColor = "rgba(255, 0, 0, 0.1)";
      e.target.style.borderColor = "rgba(255, 0, 0, 0.4)";
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    position: relative;
  }
  
  .box {
    width: 40px;
    height: 40px;
    background-color: rgba(0, 255, 0, 0.1);
    border-style: solid;
    border-color: rgb(0, 255, 0);
    position: absolute;
    top: 20px;
    left: 50px;
  }
  
  .box:hover {
    background-color: rgba(32, 58, 58, 0.4);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container" style="display: inline-block"&gt;
    &lt;img src="https://pixeljoint.com/files/icons/full/tree__r1090291261.gif"&gt;&lt;/img&gt;
    &lt;div class="box"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>