title: triggering hover through div
body: <p>I want to make a specific kind of background for my website that's comprised of 9 columns that have an animation which changes their background color, and a pause on hover for the animation.</p>
  
  <p>is it possible to keep the hover effect happening when i'll hover divs abover the one in the background?</p>
  
  <p>also, are css3 animations difficult to display for clients? what if i want to have more than this background, like a few animations running on an svg, should i start "saving up" memory already?</p>
  
  <p>thanks for the help</p>
  
  <p>see example jsfiddle here : <a href="https://jsfiddle.net/gxzhry0x/" rel="nofollow noreferrer">https://jsfiddle.net/gxzhry0x/</a></p>
  
  <pre><code>html --
  
  &lt;div class="pillars-container"&gt;
      &lt;div class="pillar" id="pillar1"&gt;&lt;/div&gt;
      ...
      &lt;div class="pillar" id="pillar9"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  css --
  
  .pillars-container {
      position:fixed;
      top:0;
      left:0;
      z-index:-9000;
  }
  
  .pillars-container * {
      display:inline-block;
  
  }
  
  .pillar {
      opacity:0.8;
      margin:0 -4px -2px 0;
      padding:0;
      width:11vw;
      height:100vh;
  
      animation-name: pillars;
      animation-duration: 170s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
  }
  
  .pillar:hover {
  
      opacity:0.7;
      animation-play-state: paused;
  }
  
  .pillar#pillar9{
      width:12vw;
  }
  
  @keyframes pillars { 
      0%      {background-color:#8F70FF;}
      2.5%    {background-color:#63C7E8;}
  ... etc }
  </code></pre>