Javascript 如何在mousemove上找到div？

当我在距离div 20px的范围内移动鼠标指针时，我试图用蓝线抓住div。只有当鼠标指针位于该div上时，我才能用蓝线抓住div。基本上，使用鼠标指针选择div很困难，因为div宽度只有1px，无法更改

我正在执行下面的代码，但仍然无法抓住div，它距离鼠标指针的右侧或左侧都有20px

注：上面提到的div表示带有蓝线的div，而不是灰色框

//Div positions and their id has been added to map
var hmap = new Map();
hmap.set("hguide1",96);
hmap.set("hguide2",284);
hmap.set("hguide3",520);

var vmap = new Map();
vmap.set("vguide1", 96);
vmap.set("vguide2",384);
vmap.set("vguide3",720);

$(document).mousemove(function(e){
   var mx = e.pageX, my = e.pageY;
   //Catch hold of vertical div's
   for (var [key, value] of vmap) {
     var dist = value - mx;
     if(dist >= -20 && dist <= 20){
       $('.'+key).css({width: '10px', left:});
     } else {
       $('.'+key).css({width: '1px'});
     }
   }
   //Catch hold of horizontal div's
   for (var [key, value] of hmap) {
     var dist = value - my;
     if(dist >= -20 && dist <= 20){
        $('.'+key).css({height: '10px'});
     } else {
        $('.'+key).css({height: '1px'});
     }
   }
});

//Div位置及其id已添加到地图中
var hmap=新映射（）；
hmap.set（“hguide1”，96）；
hmap.set（“hguide2”，284）；
hmap.set（“hguide3”，520）；
var vmap=新映射（）；
vmap.set（“vguide1”，96）；
vmap.set（“vguide2”，384）；
vmap.set（“vguide3”，720）；
$（文档）.mousemove（函数（e）{
var mx=e.pageX，my=e.pageY；
//垂直潜水器的抓地力
for（vmap的var[键，值]）{
var dist=值-mx；
如果（dist>=-20&&dist您可以使用CSS样式来获得此结果。我们将左侧或顶部的：：after大小设置为100%-20px，这取决于它是水平线还是垂直线。然后，我们将宽度或高度设置为100%或缓冲区大小，这取决于我们是调整行还是列（40px，因为我们希望线路两侧各有20px）

我意识到这听起来有点混乱，所以我将把它们分开。下面是垂直方向：

.vguide1,.vguide2,.vguide3 {
  border-left: 1px solid blue;
  padding-bottom: 20px;
  position: absolute;
  width:1px;
  height:650px;
}
.vguide1::after,.vguide2::after,.vguide3::after {
  content: '';
  position: absolute;
  left: calc(50% - 20px);
  width: 40px;
  height: 100%;
   cursor: col-resize;


}

水平：

.hguide1,.hguide2,.hguide3 {
  padding-right: 20px;
  position: absolute;
  width:850px;
  height:1px;
  border-top: 1px solid blue;

}
.hguide1::after,.hguide2::after,.hguide3::after {
  content: '';
  position: absolute;
  top: calc(50% - 20px);
  width: 100%;
  height: 40px;
   cursor: row-resize;

}

使用着色显示点击框：

没有点击框：
您可以使用CSS样式来获得此结果。我们将左侧或顶部的：：after大小设置为100%-20px，这取决于它是水平线还是垂直线。然后，我们将宽度或高度设置为100%或缓冲区大小，这取决于我们是调整行还是列（40px，因为我们希望线路两侧各有20px）

我意识到这听起来有点混乱，所以我将把它们分开。下面是垂直方向：

.vguide1,.vguide2,.vguide3 {
  border-left: 1px solid blue;
  padding-bottom: 20px;
  position: absolute;
  width:1px;
  height:650px;
}
.vguide1::after,.vguide2::after,.vguide3::after {
  content: '';
  position: absolute;
  left: calc(50% - 20px);
  width: 40px;
  height: 100%;
   cursor: col-resize;


}

水平：

.hguide1,.hguide2,.hguide3 {
  padding-right: 20px;
  position: absolute;
  width:850px;
  height:1px;
  border-top: 1px solid blue;

}
.hguide1::after,.hguide2::after,.hguide3::after {
  content: '';
  position: absolute;
  top: calc(50% - 20px);
  width: 100%;
  height: 40px;
   cursor: row-resize;

}

使用着色显示点击框：

没有点击框：
很好！我在想一件类似的事情！我想用蓝线抓住div，而不是div灰色框。很抱歉，我在问题中没有正确提到它。将更新问题。@游戏啊，我明白了。给我几分钟，我会帮你的！很好！我在想一件类似的事情！我想抓住它用蓝线按住div，不要按住div灰色框。很抱歉，我在问题中没有正确提到它。将更新问题。@游戏啊，我明白了。给我几分钟，我会帮你的！