將鼠標輸入img標簽時創建div

Question

當鼠標光標在img標簽上方時，我想用左和上創建一個div ，我嘗試了一些操作但不起作用。 這是我的代碼：

$(document).on('mouseenter', 'img', function(){
     var vid = this.id;
     if(vid == "marcker"){
       $("<div/> ",{
          id: "test",
          text:"tese",
          left: mousex+"px",//this part doesn't work
          top: mousey+"px",//this part doesn't work
          heigth:"40px", //this part doesn't work
          width: "40px", //this part doesn't work
          style:"background-color:red;height:50px;",
          class: "classA"
        }).appendTo("body");
      }
});

Answer 1

1. 您拼寫錯誤的單詞“ heigHT”
2. 不再支持width屬性，因此您必須使用CSS。
3. 什么是mousex和mousey對象？

Answer 2

我解決了我的問題

\\ function當鼠標指針位於標簽img上方時占據鼠標位置

 $(document).on('mouseenter', 'img', function(){
                if(this.id == "marcker"){
                var x = event.pageX;
                var y = event.pageY;
                create_new_div(x,y);

             }
      });

使用鼠標位置創建新div的函數

function create_new_div(mousex,mousey){
               div = document.createElement("div");
               div.style.position = "absolute";
               div.style.left = mousex + 'px';
               div.style.top =  mousey + 'px'; 
               div.style.width = "30px";
               div.style.height = "30px";
               div.style.background = "red";
               div.style.color = "blue";

               document.body.appendChild(div);
           }

非常感謝您的幫助