1

语境

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

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

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

问题

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

正确的方法是：

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

  • 做一些复杂的手动鼠标跟踪来知道我什么时候靠近边界（因为当鼠标光标在边界之外时我也需要处理）

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

谢谢！

4

1 回答 1

0

这是我从 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 元素处理了这个问题）。

于 2012-07-02T04:07:37.813 回答