HTML中选中菜单背景变暗效果提升体验度

没选中的时候，一切正常：

选中左侧菜单后，除了菜单，其它部分变暗为40%透明度。如下图：

没什么可说的，提升用户体验度，以下代码可供参考：放到页面里面自行参照修改就可以了。

<div class="mask2"></div>
<style>
.mask2 {
display:none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
filter: alpha(opacity=40);
-moz-opacity: .4;
opacity: .4;
background-color: #000;
z-index: 5
}
</style>

/*ubermenu-submenu-id-588*/
<script src="https://www.aojiao.vip/wp-content/themes/aojiaovip/static/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.ubermenu-submenu-id-588').mouseleave(function() {
//alert('鼠标离开了元素！');
$(".mask2").css({
'display': 'none',
//'margin-top':'6px'
}),
setInterval(function() {
// 这里放你想要每5秒运行一次的代码
//console.log('这段代码每5秒运行一次');
//alert('鼠标离开了才执行，否则不会执行！');
//alert('5秒弹出我一次！');
$("#menu-item-588").addClass("ubermenu-active");
}, 0);
});
$('.ubermenu-submenu-id-588').mouseover(function() {
//alert('划到这里时背景变暗');
$(".mask2").css({
'display': 'block',
//'margin-top':'6px'
});
});

})
</script>