如何在CSS / DOM中实现大小调整

Question

上下文

在OSX上，我注意到，如果我拿出鼠标光标并将其拖动到边框(底部、左侧或右侧)，光标将从常规指针更改为调整光标大小(<->)：

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

问题

现在，我注意到在CSS/DOM中，我有“鼠标超过”事件--我将如何在CSS / DOM / JavaScript中实现这样的东西？

正确的做法是：

• 创建某种类型的“无形边框”，没有显示，也没有贡献窗口的大小？
• 做一些复杂的手动鼠标跟踪，以知道何时我接近边界(因为我也需要处理当鼠标光标在边框外)
• CSS是否有某种类型的“鼠标靠近边框”而不是“鼠标超过”事件？

谢谢!

Answer 1

这是我从一个最初由未定义的用户(另一个用户)发布的方法中改进的，后来由于某种原因被删除了。这绝不应该被解释为最后一种方法，但它展示了如何创建一个带有左/右/上/下句柄的边框，所有这些都是由CSS添加的。

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

CSS

#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;
}

http://jsfiddle.net/userdude/V5h5F/1/

处理诸如需要边框和不可见的重叠之类的东西需要进行一些重新配置，可能会使用类似Javascript这样的东西，内部boundary作为边界；我认为在纯CSS中这样做的复杂性是有问题的(未定义的答案使用边界上的positioned元素处理)。