Javascript 如何在CSS/DOM中实现大小调整 上下文

在OSX上，我注意到如果我将鼠标光标拖动到边框（底部、左侧或右侧），光标将从常规指针变为调整光标大小（）：

• 我在窗口内，但在边框的4-5像素范围内

• 我在窗口外，但在边框的4-5像素范围内

问题: 现在，我注意到在CSS/DOM中，我有一个“鼠标悬停”事件——我如何在CSS/DOM/JavaScript中实现类似的东西

正确的方法是：

• 创建某种类型的“不可见边框”，不显示，也不影响窗口大小

• 执行一些复杂的手动鼠标跟踪，以了解何时接近边界（因为我还需要处理鼠标光标何时超出边界）

• CSS是否有某种类型的“鼠标靠近边框”而不是“鼠标悬停”事件

---

谢谢

这是我从未定义（另一个用户）最初发布的方法改进而来的方法，后来由于某种原因被删除。这绝不能解释为最终的方法，但它展示了如何创建具有左/右/上/下控制柄的边界框，所有这些都是通过CSS添加的

HTML

<div id='container' class='boundary top-bottom'>
  <div class='boundary left-right'>
    <div class='contents'></div>
  </div>
</div>

---

处理诸如需要边框和不可见重叠之类的事情需要一些重新工具，可能需要使用Javascript之类的东西，内部的

边框作为边框；我认为，在纯CSS中这样做的复杂性是有问题的（undefined的答案使用边界上的
位置
元素来处理这个问题）。
你是指拖动（单击并拖动）还是悬停（不单击）？嗯，这是基于@undefined先前发布的答案，但后来被删除（不确定原因）。这表明你在追求什么吗@贾里德：如果你把这个作为回答，我会接受的。
#container {
    width: 300px;
    height: 300px;
    margin: 50px;
}
.contents {
    cursor: default;
    background: green;
    width: 100%;
    height: 100%;
}
.boundary {
    background: blue;
    padding: 10px;
}
.boundary.top-bottom {
    cursor: row-resize;
    padding-left: 0;
    padding-right: 0;
}
.boundary.left-right {
    cursor: col-resize;
    padding-bottom: 0;
    padding-top: 0;
    width: 280px;
    height: 300px;
}