当另一个div处于活动状态时，如何模糊div？

Question

所以我想在#homecontent处于活动状态时模糊#visioncontent。当网址为

时，#visioncontent处于活动状态

并且#homecontent始终在后台充当主页。

http://visiondigit.al/VisionDigital_Launch/index.html

我如何设置一个脚本，可能是在jQuery（来自我已经研究过的）中指定何时#vision处于活动状态，#homecontent将会模糊，可能使用{{1}或者别的什么。

谢谢，所有输入都有帮助。我不是一位经验丰富的网页设计师。

编辑：我已经为任何人添加了一个github仓库，可以在本地玩代码，看看有什么用。我基本上希望随时#vision，＃project或#contact有效或被选中，我希望#homecontent下的家庭或背景模糊不清。

https://github.com/cweigen/VisionDigital_Launch

Answer 1

点击“愿景”后，您可以随时模糊#homecontent。菜单项通过做类似的事情......

$( "#menuVision" ).click(function() {
  $( '#homecontent' ).addClass('blurHome');
});

您需要在Vision菜单项中添加一个ID，以便

<a href="#vision"> 

变为

<a href="#vision" id="menuVision">

并在你的css ......

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

您还可以查看jQuery的hashChange事件。

$(window).on('hashchange',function(){ 
    //Add class here if location.hash = vision.
});

修改 使index.html看起来像this。

注意事项：

• 我从id='#menuVision
中删除了＃
• 我在<script>标记中更改了您的JS。
• 我在css中添加了blurHome类。
• 您应该将<script>和<style>代码分别移动到js和css文件中。