title: CSS blur every element on page except the one hovered upon
body: <p>I want to be able to make every class/id on this page blur out, when one class (.next) is hovered upon. Does anyone know how I might go about doing this?</p>
  <p>heres an example of a jsbin that sort of is doing what I want, except when I try to implement what they used here, it doesn't work fsr...</p>
  <p><a href="https://jsfiddle.net/thebabydino/EajKf/" rel="nofollow noreferrer">https://jsfiddle.net/thebabydino/EajKf/</a></p>
  <p>here is my code:</p>
  <p>HTML</p>
  <pre><code>&lt;!-- Trusttxt--&gt;
  &lt;div class=&quot;trusttxt&quot;&gt;
      &lt;ol class=&quot;u&quot;&gt;
          &lt;li class=&quot;rotate&quot;&gt;t&lt;/li&gt;
          &lt;li class=&quot;rotate&quot;&gt;r&lt;/li&gt;
          &lt;li class=&quot;rotate&quot;&gt;u&lt;/li&gt;
          &lt;li class=&quot;rotate&quot;&gt;s&lt;/li&gt;
          &lt;li class=&quot;rotate&quot;&gt;t&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;!--close Trusttxt --&gt;
  
  &lt;!-- Issuetxt--&gt;
  &lt;div class=&quot;issuetxt&quot;&gt;
  &lt;ol class=&quot;u&quot;&gt;
      &lt;li class=&quot;rotate&quot;&gt;i&lt;/li&gt;
      &lt;li class=&quot;rotate&quot;&gt;s&lt;/li&gt;
      &lt;li class=&quot;rotate&quot;&gt;s&lt;/li&gt;
      &lt;li class=&quot;rotate&quot;&gt;u&lt;/li&gt;
      &lt;li class=&quot;rotate&quot;&gt;e&lt;/li&gt;
      &lt;li class=&quot;rotate&quot;&gt;s&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;!--close Issuetxt --&gt;  
  
  &lt;!-- Countdown--&gt;
  &lt;div class='countdwnwrap'&gt;
  &lt;div class=&quot;countdown&quot;&gt;&lt;/div&gt;
      &lt;p class=&quot;labels&quot;&gt;
          &lt;span class=&quot;tr&quot;&gt;TIME REMAINING&lt;/span&gt;
      &lt;/p&gt;
  &lt;/div&gt;  
  &lt;!--close Countdown --&gt;
  &lt;br/&gt;&lt;br/&gt;
  &lt;!-- Link to artist, page 1, aaron kolfage--&gt;
  
  &lt;a href='aaron/index.html' class='next'&gt;V&lt;/a&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>body {
  font-family: 'RicassoRegular'; 
  font-weight: normal; 
  font-style: normal; 
  cursor: crosshair; 
  }
  
  /* title */
  ol.u {
  list-style-type: none;
  }
  
  .trusttxt {
  width: 8vw;
  height: 30vw;
  font-size: 5vw;
  color: white;
  text-shadow: 0.1vw 0.2vw 1vw rgba(193, 241, 255, 1);
  text-align: center center;
  margin-top: 5vw;
  }
  
  .issuetxt {
  width: 8vw;
  height: 30vw;
  font-size: 5vw;
  color: white;
  margin-left: 89%;
  text-shadow: 0.1vw 0.2vw 1vw rgba(254, 226, 255, 1);
  text-align: center center;
  padding-right: 3vw;
  margin-top: -36vw;
  }
  
  /* rotate txt */ 
  .rotate {
   -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
   
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
   
  overflow: hidden;
  
  }
  
  li:hover {
   -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  float: top;
  z-index: -3;
  }
  
  /* countdown */
  .countdown {
  margin-top: -29vw;
  margin-left: 20%;
  font-size: 2vw;
  }
  /* numbers */
  #days {
  font-size: 5vw;
  color: white;
  text-shadow: 0.1vw 0.2vw 2vw rgba(254, 226, 255, 1);
  }
  #hours {
    font-size: 5vw;
    color: white;
    text-shadow: 0.1vw 0.2vw 2vw rgba(254, 226, 255, 1);
  }
  #minutes {
    font-size: 5vw;
    color: white;
    text-shadow: 0.1vw 0.2vw 2vw rgba(254, 226, 255, 1);
  }
  #seconds {
    font-size: 5vw;
    color: white;
    text-shadow: 0.1vw 0.2vw 2vw rgba(254, 226, 255, 1);
  }
  /* text */
  .tr {
    font-size: 5vw;
    padding-left: 7.5vw;
    color: white;
    text-shadow: 0.1vw 0.2vw 2vw rgba(193, 241, 255, 1);
    margin-left: 10%;
  }
  
  /* next pulse*/
  .next {
  text-decoration: none;
  color: white;
  -webkit-animation-name: nextPulse;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
    cursor: cell;
    margin-left: 43.5%;
    font-size: 10vw;
  }
  
  @-webkit-keyframes nextPulse {
    from { text-shadow: 0.1vw 0.2vw 1vw rgba(193, 241, 255, 1); }
    50% { text-shadow: 0.1vw 0.2vw 4vw rgba(193, 241, 255, 1); }
    to { text-shadow: 0.1vw 0.2vw 1vw rgba(193, 241, 255, 1); }
  }
  
  .next:hover ~ .tr {
    webkit-filter: blur(3px);
  }
  </code></pre>
  <p>...and the js bin where I've put it:
  <a href="https://jsfiddle.net/slutcore/p9es4b8b/" rel="nofollow noreferrer">https://jsfiddle.net/slutcore/p9es4b8b/</a></p>