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

Question

上下文

在 OSX 上，我注意到如果我将鼠标光标拖动到边框(底部、左侧或右侧)，光标会从常规指针变为调整光标大小 (<->)，此时:

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

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

问题

现在，我注意到在 CSS/DOM 中，我有“鼠标悬停”事件——我如何在 CSS/DOM/JavaScript 中实现这样的事情？

正确的做法是:

• 创建某种不显示的“隐形边框”，并且不影响窗口大小？

• 进行某种复杂的手动鼠标跟踪以了解我何时接近边界(因为当鼠标光标超出边界时我还需要处理)

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

谢谢!

Answer 1

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

HTML

<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 中这样做的复杂性是有问题的(undefined 的答案使用边界上的 positioned 元素处理了这个问题)。