光标位置的基板

Question

我提前为英语道歉。我不能做一件事。 有9个正方形，370-370。将光标移动到正方形远端的任何方块时，光标应显示为半透明正方形并输入光标所指向的方框。但它并不总是对我有用。请帮帮我。如果您需要HTML或CSS，请询问。谢谢。这是我的方式：

enter code here $(document).ready(function() {
    var mouseX = 0, mouseY = 0, limitX = 370, limitY = 370;

 $(".cities-featured-item").mouseenter(function (e) {

      var offset = $(this).offset();
      mouseX = Math.min(e.pageX - offset.left, limitX);
      mouseY = Math.min(e.pageY - offset.top, limitY);
      mouseScrollX = e.pageX;
     if (mouseX < 0) mouseX = 0;
     if (mouseY < 0) mouseY = 0;
      //console.log('ENTER ' + mouseX + ' - '+ mouseY);
      //alert(e.pageX+" - "+e.pageY);

     if (mouseY < 25) {
         $(this).children("div.layout").css({left: 0, top: "-100%", transform: "matrix(1, 0, 0, 1, 0, 0)", transition: "all 200ms easy"});
         $(this).children("div.layout").animate({top: 0}, 200);
     }
     if (mouseX < 25) {
         $(this).children("div.layout").css({top: 0, left: "-100%", transform: "matrix(1, 0, 0, 1, 0, 0)", transition: "all 200ms easy"});
         $(this).children("div.layout").animate({left: 0}, 200);
     }
      if (mouseX > 350) {
          $(this).children("div.layout").css({top: 0, left: "100%", transform: "matrix(1, 0, 0, 1, 0, 0)", transition: "all 200ms easy"});
          $(this).children("div.layout").animate({left: 0}, 200);
      }
      if (mouseY > 350) {
          $(this).children("div.layout").css({left: 0, top: "100%", transform: "matrix(1, 0, 0, 1, 0, 0)", transition: "all 200ms easy"});
          $(this).children("div.layout").animate({top: 0}, 200);
      }

      //$(this).children("img.pricel").animate({top: "135px", left: "135px"}, 200);
      //$(this).children("img.pricel").animate({left: "+=135px"}, 500);
     // $(this).children(".cities-featured-item-content").html(mouseX+" - "+mouseY);

  });
  $(".cities-featured-item").mouseleave(function (e) {

      var offset = $(this).offset();
      mouseX = Math.min(e.pageX - offset.left, limitX);
      mouseY = Math.min(e.pageY - offset.top, limitY);

      //console.log('LEAVE ' + mouseX + ' - '+ mouseY);
      //alert(e.pageX+" - "+e.pageY);
      if (mouseX < 0) mouseX = 0;
      if (mouseY < 0) mouseY = 0;
      if (mouseY < 25) {
          $(this).children("div.layout").animate({top:"-100%"}, 200);
          $(this).children("div.layout").css({left: 0, transform: "matrix(0.7, 0, 0, 0.7, 0, 0)" , transition: "all 200ms easy"});
      }
      if(mouseX < 25) {
          $(this).children("div.layout").animate({left: "-100%"}, 200);
          $(this).children("div.layout").css({top: 0, transform: "matrix(0.7, 0, 0, 0.7, 0, 0)" , transition: "all 200ms easy"});
      }
      if(mouseX > 350) {
          $(this).children("div.layout").animate({left: "100%"}, 200);
          $(this).children("div.layout").css({top: 0, transform: "matrix(0.7, 0, 0, 0.7, 0, 0)" , transition: "all 200ms easy"});
      }
      if(mouseY > 350) {
          $(this).children("div.layout").animate({top: "100%"}, 200);
          $(this).children("div.layout").css({left: 0, transform: "matrix(0.7, 0, 0, 0.7, 0, 0)" , transition: "all 200ms easy"});
      }
      //$(this).children("img.pricel").animate({top: mouseY +'px' , left: mouseX + 'px'}, 200);
      //$(this).children("img.pricel").animate({left: "-=235px"}, 500);
      //$(this).children(".cities-featured-item-content").html(mouseX+" - "+mouseY);


  });