title: Changing z-index with js
body: <p>I have a problem with a <code>z-index</code> change with js:
  I have a bunch of cards</p>
  
  <pre><code>.card
  {
      background: rgb(70, 70, 70);
      width: 300px;
      padding-bottom: 10px;
      float: left;
      margin: 100px 5px 0 5px;
      opacity: 0;
      box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
      transition: 1s;
      z-index: -1 !important;
  }
  </code></pre>
  
  <p>and I change some properties with js:</p>
  
  <pre><code>window.onload = function()
  {
      var cards = document.querySelectorAll(".card");
      for (let i = 0; i &lt; cards.length; i++)
      {
          cards[i].style.margin = "0 5px 0 5px";
          cards[i].style.opacity = "1";
      }
      for (let i = 0; i &lt; cards.length; i++)
      {
          cards[i].style.transition = ".4s";
      }
      for (let i = 0; i &lt; cards.length; i++)
      {
          cards[i].onmouseover = function()
          {
              cards[i].style.zIndex = "9";
              cards[i].style.transform = "scale(1.1)";
          }
          cards[i].onmouseout = function()
          {
              cards[i].style.zIndex = "-1";
              cards[i].style.transform = "scale(1)";
          }
      }
  }
  </code></pre>
  
  <p>If you hover the first card everything is fine, it goes over the second one but as soon as I hover the second one and try to hover over the first one again it breaks: <a href="https://gyazo.com/9ace3afefdebaaf6b58b800bce352b6b" rel="nofollow noreferrer">Gif for a better understanding of my problem</a></p>
  
  <p>I am not an expert in js so if something is horribly wrong point it out but don't be mean.</p>
  
  <p>I've tried the <code>!important</code> tag in the default CSS but it didn't do anything when I inspect the elements the second card keeps the <code>z-index: -1</code> and the first card has the <code>z-index: 9</code> but it still draws it beneath it.
  I've also tried to set the <code>card[i + 1]</code> to <code>-1</code> before setting the <code>card[i]</code> to <code>9</code> but it did not work.</p>
  
  <p>I've stumbled upon the <code>setAttribute()</code> for the style but it looks like it overrides all the other CSS and that would result in a long string of text in my case ("haven't tested if I put all the CSS in that if it works because it seemed like an ugly solution")</p>
  
  <p>I am out of ideas... P.S. not allowed to use jQuery or another external library.</p>
  
  <p>EDIT code snippet:</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>window.onload = function()
  {
      var cards = document.querySelectorAll(".card");
      for (let i = 0; i &lt; cards.length; i++)
      {
          cards[i].style.margin = "0 5px 0 5px";
          cards[i].style.opacity = "1";
      }
      setTimeout(1000);
      for (let i = 0; i &lt; cards.length; i++)
      {
          cards[i].style.transition = ".4s";
      }
      for (let i = 0; i &lt; cards.length; i++)
      {
          cards[i].onmouseover = function()
          {
              cards[i].style.zIndex = "9";
              cards[i].style.transform = "scale(1.1)";
          }
          cards[i].onmouseout = function()
          {
              cards[i].style.zIndex = "-1";
              cards[i].style.transform = "scale(1)";
          }
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.card
  {
      background: rgb(70, 70, 70);
      width: 300px;
      padding-bottom: 10px;
      float: left;
      margin: 100px 5px 0 5px;
      opacity: 0;
      box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
      transition: 1s;
      z-index: -1;
  }
  .card:hover
  {
      box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  }
  .card &gt; img
  {
      width: 300px;
  }
  .card-title
  {
      margin-top: 5px;
      font-family: 'Roboto', sans-serif;
      font-weight: 900;
  }
  .card-text
  {
      margin-top: 5px;
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="card"&gt;
                  &lt;img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg"&gt;
                  &lt;div class="card-title"&gt;
                      Consoles
                  &lt;/div&gt;
                  &lt;div class="card-text"&gt;
                      some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text 
                  &lt;/div&gt;
              &lt;/div&gt;
  &lt;div class="card"&gt;
                  &lt;img src="https://flipsy.com/blog/images/OldGameConsoles99.jpg"&gt;
                  &lt;div class="card-title"&gt;
                      Consoles
                  &lt;/div&gt;
                  &lt;div class="card-text"&gt;
                      some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text some random text 
                  &lt;/div&gt;
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>