首页 新闻 搜索 专区 学院

关于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>

问题补充:

急求人, 指点迷津啊!!!求大虾出手!!

 

还是没找到答案啊, 求高手!!!

梦愿的主页 梦愿 | 初学一级 | 园豆:165
提问于:2013-09-02 23:25
< >
分享
最佳答案
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
小草__ | 初学一级 |园豆:194 | 2013-09-03 17:22

恭喜你答对了!

梦愿 | 园豆:165 (初学一级) | 2013-09-06 17:29
其他回答(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);

 

关键是思路哈!

nickel | 园豆:338 (菜鸟二级) | 2013-09-03 09:23

试过了, 还是不可以啊!!在进入item1的时候,不是创建了遮罩层“zhe”, 这样子原来的item1就被盖住了, 不能操作了,当我鼠标移开的时候, 把遮罩层移除掉, 让item1重新显示出来!!这个需求怎么都实现不了啊, 纠结啊!!

支持(0) 反对(0) 梦愿 | 园豆:165 (初学一级) | 2013-09-03 09:36
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册