我想做一个遮罩层，鼠标移动item1上的时候，在其上添加一个遮罩层， 当鼠标离开后删除遮罩层，以下是我写的代码，不能如愿实现， 问题在哪里，求高手指教！！！
$(function(){
$(".item1").mouseover(function () {
var thiswidth = $(this).outerWidth();
var thisheight = $(this).outerHeight();
var pos_xy = $(this).position();
$(this).before("〈div class='zhe' style='width:" + thiswidth + "px; height:" + thisheight + "px;position: absolute;z-index: 9998;left: " + pos_xy.left + "px;top: " + pos_xy.top + "px;filter: Alpha(Opacity=80);-moz-opacity: 0.8;opacity: 0.8;background-color: #FF0000;display:block'>编辑〈a class='cancle' href='#'>取消</a〉</div〉");
});
$(".zhe").mouseleave(function () {
$(".zhe").remove();
alert("离开并删除了");
});
$(".cancle").mouseleave(function () {
$(".zhe").remove();
alert("离开并删除了");
});
})
《div class="item1"》
《p>模块一
《div class="item2">
《p>模块二
《/div>
）
<title>absolute</title>
<style type="text/css" media="screen">
.item1 { float: left; border: 1px solid #999999; width: 490px; } .item2 { float: left; width: 490px; margin-left: 10px; border: 1px solid #0000FF; } body { margin-right: auto; margin-left: auto; width: 1000px; }
</style>
<script type="text/javascript" src="../javascript/js/jquery-1.9.1.js" ></script>
<script type="text/javascript">
$(function(){
$(".item1").mouseover(function () {
var thiswidth = $(this).outerWidth();
var thisheight = $(this).outerHeight();
var pos_xy = $(this).position();
$(this).before("<div class='zhe' style='width:" + thiswidth + "px; height:" + thisheight + "px;position: absolute;z-index: 9998;left: " + pos_xy.left + "px;top: " + pos_xy.top + "px;filter: Alpha(Opacity=80);-moz-opacity: 0.8;opacity: 0.8;background-color: #FF0000;display:block'>编辑<a class='cancle' href='#'>取消</a></div>");
$(".zhe").mouseleave(function () {
$(this).remove();
alert("离开并删除了");
});
$(".cancle").mouseleave(function () {
$(".zhe").remove();
alert("离开并删除了");
});
});
});
</script>
</head>
<body>
<div class="item1">
<p>模块一
<p>模块一</p>
<div class="item2">
<p>模块二
<p>模块二</p>
</div>
</body>
</html>
因为你这个遮罩层是动态添加的，所以你一开始就写好方法，juqery会找不到元素，所以不行