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でそれを行うことの複雑さは、私が思うに問題があります（undefinedの答えpositionは境界上のed要素でこれを処理しました）。

于 2012-07-02T04:07:37.813 に答える