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