fromairsky
fromairsky
采纳率100%
2013-09-03 01:03 阅读 2.0k
已采纳

关于鼠标移开遮罩层后,移除遮罩层的问题求大神解救!!!急++++

我想做一个遮罩层,鼠标移动item1上的时候,在其上添加一个遮罩层, 当鼠标离开后删除遮罩层,以下是我写的代码,不能如愿实现, 问题在哪里,求高手指教!!!


遮盖层 .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; }

$(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>模块一

《p>模块一</p》

《div class="item2">
《p>模块二

《p>模块二</p〉

《/div>

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    flyed2008 微网网络 2013-09-04 05:21



        <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会找不到元素,所以不行

    点赞 1 评论 复制链接分享

相关推荐