开发者社区> 问答> 正文

为什么这段把东西插入格子的代码只有在火狐中正常?求大神帮忙!

<!DOCTYPE html>
<html lang="zh-CN" ng-app="cakefun">
  <head>
    <meta charset="utf-8">
  </head>
  <style>
     .canvastable{
  width:330px;
  height:330px;
 transform: rotateX(64deg) rotateZ(37deg) translate(80px,10px);
  position:absolute;
  z-index:999;
  cursor:pointer;
}
.td{
      width:12.5%;
      height:12.5%;
      float:left;
      border:1px solid #eee;
    }
    .td:hover{
        background-color:rgba(0,0,0,0.3);
      }
  </style>
<body>

       <div class="canvastable">
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>

              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>

              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>

              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>

              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>

              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>

              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>

              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>

          </div>
          <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
          <script>
           var div = document.createElement("div");

            $(div).css({"position":"absolute","display":"block","width":"30px","height":"30px","z-index":"999","background":"red"});
              $("body").append($(div));
              $(document).mousemove(function(ev){
                var x = ev.pageX,
                  y = ev.pageY;
                $(div).css({"left":x,"top":y});
              });

            $(".td").click(function(){
                if($(this).children().length){
                   $(this).empty();
                }
              else{
                $(this).append(function(){
                     var obj = $(div).clone().css({"width":"30px","position":"static"});
                     return obj;
                   });
                }
              });
          </script>
   </body>
</html>

运行后可以看到左边有一个个小格子,鼠标悬浮有黑色高亮效果,点击小格子会将红色的div元素插入进格子。亲测火狐可用,但是chrome和safari不能把div插进去,求问哪里导致了兼容性问题?

展开
收起
杨冬芳 2016-06-16 14:36:30 1932 0
1 条回答
写回答
取消 提交回答
  • 码农|Coder| Pythonista

    好像是 跟随鼠标的那个红色区块挡住了高亮的小格子 鼠标根本没有点到吧

    2019-07-17 19:40:51
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载