无悬停物品模糊

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

Answer 2

确实，你不能在CSS中这样做。如果您使用的是javascript，则可以使用mouseenter和mouseleave事件将其归档。