css如何实现动态模糊遮罩效果

html-css025

css如何实现动态模糊遮罩效果,第1张

不是很明白你要的是什么效果，既然是导航，本来z-index就会高于内容，不会影响误操作到内容，没必要做遮罩层。鼠标放到哪，哪模糊，用a:hover实现就行了，你如果要遮罩整个界面而不只是导航下面那部分，那做一个遮罩层就行了，做成半透明，控制他的display在none和block之间变换，绑定移入移出事件给导航的各个元素。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

a{display: blockwidth: 200pxheight: 200pxposition: relative}

img{width: 200pxheight: 200px}

div{background: #111111z-index: 999width: 200pxheight: 200pxposition: absolutetop: 8pxopacity: 0}

</style>

<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

$(function(){

$("div").hover(function(){

$("div").css("opacity","0.2")

$("img").css("opacity","0.65")

},function(){

$("div").css("opacity","0")

$("img").css("opacity","1")

})

})

</script>

</head>

<body>

<a href=""><img src="../img/1.jpg"/></a><div></div>

自己换一张图片，导入jQuery.min的开发库

</body>

</html>