fromairsky 2013-09-03 01:03 采纳率: 100%
浏览 1979
已采纳

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

我想做一个遮罩层，鼠标移动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条回答 默认 最新

  • 微网网络 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会找不到元素，所以不行

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？