
マウスのカーソル（ポインター）の変更方法です。CSS / jQuery / JavaScript の3種類の変更方法を紹介します。

## 1. CSSで変更する

カーソルに使用したい画像を用意します。画像の形式はIEを含めたブラウザに対応する場合は「.cur」または「.ani」になります。

マウスのカーソルを変更したいエリアを対象にCSSを設定します。サイト全体であれば「body」に指定してください。マウスのカーソルは「cursor」プロパティの値を画像のURLにすることで変更できます。画像のカンマの後の指定は画像が表示されない場合の代替です。

```css
.change {
  cursor: url(images/original.cur), default;
}
```

[「マウスのカーソルを好きな画像に変更する」のデモはこちら](https://demos.chocolat5.com/cursor-change/)

## 2. jQueryで変更する

カーソルに使用したい画像を用意します。画像の形式「png」です。カーソルを変更したいエリアの中に用意したカーソル用の画像を読み込みます。

```html
<div class="change">
  <img src="original.png" alt="" />
</div>
```

CSSで必要な設定は主に以下になります。

- デフォルトのカーソルを `cursor: none;` で非表示に
- 変更後のカーソル画像を見えなくする
- 任意の class 名がある場合は変更後のカーソル画像を見えるようにする

```css
.change {
  position: relative;
  cursor: none;
}

.change img {
  position: fixed;
  visibility: hidden;
  opacity: 0;
}

.change.on_mouse img {
  visibility: visible;
  opacity: 1;
}
```

jQuery では、「エリアにマウスを置いたら画像を表示/エリアからマウスが外れたら画像を非表示」と「カーソルの画像をマウスに追従させる」の2つを設定します。画像の表示/非表示は `addClass` `removeClass` で行います。マウスの追従は、マウスの位置を取得し、その値を画像のCSSとして設定します。マウスと同じ位置に画像が表示され、マウスが動くと画像も一緒に動くため、マウスのカーソルが変わったように見えます。

```js
$(function () {
  //マウスが置かれたらclass「on_mouse」を追加、外れたら「on_mouse」を削除
  $(".change2")
    .on("mouseover", function () {
      $(this).addClass("on_mouse");
    })
    .on("mouseout", function () {
      $(this).removeClass("on_mouse");
    });

  //マウスの位置にあわせて画像のCSSを指定
  function mouseMove(e) {
    $(".change2 img").css({
      top: e.clientY,
      left: e.clientX,
    });
  }
  $(".change2").on("mousemove", mouseMove);
});
```

[「マウスのカーソルを好きな画像に変更する」のデモはこちら](https://demos.chocolat5.com/cursor-change/)

## 3. JavaScriptで変更する

HTML / CSS は「 [2. jQuery で変更する](#2-jquery%E3%81%A7%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B) 」場合と同じです。

JavaScriptも、基本的には「 [2. jQuery で変更する](#2-jquery%E3%81%A7%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B) 」場合と同じで、エリアの class の付け替えは `Element.classList.add` `Element.classList.remove` で行います。画像の css での位置指定は `Element.style.top` `Element.style.left` で行います。

```js
const cursor = document.querySelector(".change");
const cursorImg = document.querySelector(".change img");

const mouseMove = (e) => {
  cursorImg.style.top = `${e.clientY}px`;
  cursorImg.style.left = `${e.clientX}px`;
};

cursor.addEventListener("mouseover", (e) => {
  cursor.classList.add("on_mouse");
  mouseMove(e);
});

cursor.addEventListener("mouseout", () => {
  cursor.classList.remove("on_mouse");
});
```

[「マウスのカーソルを好きな画像に変更する」のデモはこちら (CodeSandbox)](https://codesandbox.io/s/cursor-change-q6jsls)

## 参考

- [「カーソルの形を変更する」, <[http://www.tagindex.com/stylesheet/page/cursor.html>](http://www.tagindex.com/stylesheet/page/cursor.html)（参照2017-10-8）](<http://www.tagindex.com/stylesheet/page/cursor.html>%5D(http://www.tagindex.com/stylesheet/page/cursor.html)%EF%BC%88%E5%8F%82%E7%85%A72017-10-8%EF%BC%89>)


マウスのカーソルを好きな画像に変更する

Tags