Question

上下文

在OSX上，我注意到如果我将鼠标光标拖到边框（底部，左侧或右侧），光标将从常规指针变为调整大小光标（＆lt; - ＆gt;）时： / p>

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

问题

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

正确的方法是：

创建一些未显示的“隐形边框”，也不会影响窗口大小？
进行某种类型的复杂手动鼠标跟踪，以了解我何时接近边界（因为当鼠标光标位于边界外时我也需要处理）
CSS是否有某种类型的“鼠标靠近边界”而不是“鼠标悬停”事件？

谢谢！

Answer 1

这是一种我最初由undefined（另一个用户）发布的方法改进的方法，后来由于某种原因被删除了。这绝不应该被解释为最终方法，但它显示了如何创建一个带有左/右/上/下手柄的边界框，所有这些都是由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中执行此操作的复杂性是有问题的（未定义的答案通过边界上的position ed元素处理此问题。）

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

上下文

问题

1 个答案: