ドラッグで変化するカーソルの作り方｜CSS

Swiper.js

なんかを使う時、ドラッグして横にスライドできるけど
矢印のままじゃユーザーに分かりずらいから、
ちゃんとスライドできる範囲は「パー」にしてドラッグしたら「グー」にするCSS。

【DEMO】

お分かりいただけただろうか？

エリアに入るとちゃんとカーソルが変更して、ドラッグすると「グー」に変更するのが分かると思う。
ドラッグを検知するには、CSS疑似の疑似要素「:active」を付けると検知可能だ。

【CSS】

.demo {
// カーソルを「パー」にする
cursor:grab;
}
// ドラッグを検知する
.demo:active {
// 「グー」にする
cursor:grabbing;
}