Web production note

　【更新日 : 】

【JavaScript】指定エリアごとにマウスポインタを変更する機能を実装する

Category：
css / js
Tags：
, , ,

指定エリアごとにマウスポインタを画像やテキスト要素に変更する機能をJavaScriptで実装したサンプルです。
CSSのcursorは画像のみですが、JSはサイズ制限もなくテキスト表示やエフェクトも自由なのでサイトのトンマナに合わせやすくなります。

codepen

See the Pen Change mouse pointer in designated area Vanilla JS by web_nak (@web_walking_nak) on CodePen.

JavaScript

//指定エリアでマウスポインタを変更する関数 target:表示エリア, pointer:表示させたいポインタ
const changeCursor = (target, pointer) => {
  //ポインタがない場合は終了
  if(!window.matchMedia('(pointer: fine)').matches) {
    return;
  }

  //対象が存在しない場合は終了
  const pointerAreas = document.querySelectorAll(target);
  const targetPointer = document.querySelector(pointer);
  if(pointerAreas.length === 0 || !targetPointer) {
    return;
  }

  //ポインタ設定
  pointerAreas.forEach((pointerArea) => {
    //ポインタ表示
    pointerArea.addEventListener('mouseenter', () => {
      targetPointer.classList.add('is-active');
    });
    //ポインタ非表示
    pointerArea.addEventListener('mouseleave', () => {
      targetPointer.classList.remove('is-active');
    });
    //ポインタ移動
    pointerArea.addEventListener('mousemove', (e) => {
      targetPointer.style.top = e.clientY + 'px';
      targetPointer.style.left = e.clientX + 'px';
    });
  });
}

HTML

表示させるエリアと表示させたいマウスポインタ用の要素を準備します。

<p class="js-cursor-elm01 cursor-none">ポインタ表示エリア</p>

<!-- 表示させるマウスポインタ -->
<div class="js-cursor-pointer01 cursor-pointer">マウスポインタ</div>

CSS

カーソルのstyleは環境に合わせて適宜編集してください。

.cursor-pointer {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  z-index: 10;
  transform: scale(0);
  height: 160px;
  width: 160px;
  margin: -80px 0 0 -80px;
  transition: transform .3s,opacity .3s,visibility .3s;
  pointer-events: none;
}
.cursor-pointer.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.cursor-none {
  cursor: none;
}

関数の呼び出し

任意の場所で関数を呼び出してください。

//関数呼び出し target:表示エリア, pointer:表示させたいポインタ
changeCursor('.js-cursor-elm01','.js-cursor-pointer01');