javascript - 在非悬停元素上模糊

Question

我需要一些关于模糊效果的帮助 :D我有以下内容:

<header>
            <div>Home</div>
            <div>Menu</div>
            <div>Settings</div>
            <div class="men">Account</div>
</header>

和CSS:

header > div:hover{
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);

    color:#000;
    background-color:#FFF;
    height:120%;
}

如果我将鼠标悬停在一个 div 上，它会使用模糊效果，但是......我该怎么做才能在非悬停元素上添加模糊效果？我想要所有模糊的元素，但悬停除外。我想我需要 javascript 吗？

谢谢大家:D

Answer 1

只有使用 CSS 才能实现。

 header > div:hover{
color:#000;
background-color:#FFF;
height:120%;
}
header > div:hover ~ div{
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);

color:#000;
background-color:#FFF;
height:120%;
}

编辑:

以上仅适用于下一个兄弟元素。这是适合您场景的完整解决方案。

  header:hover > div{
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
  filter: blur(1px);

    color:#000;
   background-color:#FFF;
    height:120%;
   }
  header > div:hover{
  color:#000;
  background-color:#FFF;
  height:120%;
 -webkit-filter: blur(0px);
 -moz-filter: blur(0px);
 -o-filter: blur(0px);
 -ms-filter: blur(0px);
 filter: blur(0px);

 }

DEMO