CSS 模糊页面上的每个元素，除了悬停的元素

Question

当悬停在一个类 (.next) 上时，我希望能够使此页面上的每个类/ID 模糊。有谁知道我该怎么做？

这是一个 jsbin 的示例，它正在做我想做的事情，除非我尝试实现他们在这里使用的东西，它不起作用 fsr...

https://jsfiddle.net/thebabydino/EajKf/

这是我的代码：

HTML

<!-- Trusttxt-->
<div class="trusttxt">
    <ol class="u">
        <li class="rotate">t</li>
        <li class="rotate">r</li>
        <li class="rotate">u</li>
        <li class="rotate">s</li>
        <li class="rotate">t</li>
    </ul>
</div>
<!--close Trusttxt -->

<!-- Issuetxt-->
<div class="issuetxt">
<ol class="u">
    <li class="rotate">i</li>
    <li class="rotate">s</li>
    <li class="rotate">s</li>
    <li class="rotate">u</li>
    <li class="rotate">e</li>
    <li class="rotate">s</li>
</ul>
</div>
<!--close Issuetxt -->  

<!-- Countdown-->
<div class='countdwnwrap'>
<div class="countdown"></div>
    <p class="labels">
        <span class="tr">TIME REMAINING</span>
    </p>
</div>  
<!--close Countdown -->
<br/><br/>
<!-- Link to artist, page 1, aaron kolfage-->

<a href='aaron/index.html' class='next'>V</a>

CSS

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);
}

...以及我放置它的 js bin： https://jsfiddle.net/slutcore/p9es4b8b/

Answer 1

也许应用这个：

.a:hover ~ div { background: lightgreen; 

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

查看更新的小提琴：https://jsfiddle.net/EajKf/775/