当mouseenter在img标签中时创建div

时间:2018-01-18 01:57:40

标签: javascript jquery

当鼠标光标位于div标签上方时,我想创建一个左侧和顶部的img,我尝试了一些但不起作用。这是我的代码:

$(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");
      }
});

2 个答案:

答案 0 :(得分:0)

  1. 你拼错了“heigHT”这个词
  2. 不再支持width属性,因此您必须使用CSS。
  3. 什么是mousex和mousey对象?

答案 1 :(得分:0)

我解决了我的问题

\当鼠标点位于标签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);
           }

非常感谢你的帮助