关于jquery div遮罩层的莫明其妙问题！！急求高手指教
0
悬赏园豆：5
[已解决问题]
解决于 2013-09-06 17:30
我想做一个遮罩层，鼠标移动item1上的时候，在其上添加一个遮罩层， 当鼠标离开后删除遮罩层，以下是我写的代码，不能如愿实现， 问题在哪里，求高手指教！！！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>遮盖层</title>
<style type="text/css">
.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 src="jquery-1.4.4.min.js" type="text/javascript"></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'><span id='edit'>编辑</span><a class='cancle' href='#'>取消</a></div>");
});
$(".zhe").mouseleave(function () {
$(".zhe").remove();
alert("离开并删除了");
});
$(".cancle").mouseleave(function () {
$(".zhe").remove();
alert("离开并删除了");
});
})
</script>
</head>
<body>
<div class="item1">
<p>模块一</p>
<p>模块一</p>
<p>模块一</p>
<p>模块一</p>
</div>
<div class="item2">
<p>模块二</p>
<p>模块二</p>
<p>模块二</p>
<p>模块二</p>
</div>
</body>
</html>
最佳答案
0
不谢！
<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'><span id='edit'>编辑</span><a class='cancle' href='#'>取消</a></div>"); $(".cancle").mouseout(function() { $(".zhe").remove(); alert("离开并删除了"); }); }); }) </script>
收获园豆：5
恭喜你答对了！
其他回答(1)
0
额。我估计会不会是这问题，你写的js代码在元素被创建出来之前给他绑定事件；
可以试试这样：
var temp=$("<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'><span id='edit'>编辑</span><a class='cancle' href='#'>取消</a></div>").mouseleave(function () {
$(this).remove();
alert("离开并删除了");
});
$(this).before(temp);
关键是思路哈！
试过了， 还是不可以啊！！在进入item1的时候，不是创建了遮罩层“zhe”, 这样子原来的item1就被盖住了， 不能操作了，当我鼠标移开的时候， 把遮罩层移除掉， 让item1重新显示出来！！这个需求怎么都实现不了啊， 纠结啊！！