css - 選択範囲のカーソルを変更するか、div 内にドラッグしますか?

Question

例を次に示します。

div 内をドラッグすると、カーソルが十字形になります。に変更divすると動作しcanvasます。

起源：

<div id="draw" />

#draw { 
    cursor: pointer;
    border:1px solid black;
    width:200px;
    height:200px;
}

#draw:active { 
    cursor: crosshair;
}

divで機能しないのはなぜですか?

Answer 1

これは、<div>要素内にドラッグすると、ブラウザーがコンテンツを選択しようとするためです。user-select部門でCSS3 プロパティを使用できます。

#draw { 
    cursor: pointer;
    border:1px solid black;
    width:200px;
    height:200px;

    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

#draw:active { 
    cursor: crosshair;
}

JSFiddleデモ