パーツ番号 08-06-02 ・ JavaScript使用

テキスト表示カーソル

ホバーした要素に応じてカーソル脇のラベルが「見る」「クリック」などに切り替わります。商品一覧やギャラリーの操作誘導に便利です。

hoverclickjs

プレビュー

ソースコード

HTML

<div class="d08-06-02-zone d08-06-02-a" data-label="見る">画像エリア</div>
        <div class="d08-06-02-zone d08-06-02-b" data-label="クリック">ボタン</div>
        <span class="d08-06-02-label"></span>

CSS

.d08-06-02{cursor:none;display:flex;gap:14px;}
        .d08-06-02-zone{flex:1;height:100px;display:flex;align-items:center;justify-content:center;background:#f2f4fa;border-radius:8px;color:#555;font-size:13px;}
        .d08-06-02-label{position:absolute;left:0;top:0;background:#222;color:#fff;font-size:12px;padding:4px 10px;border-radius:999px;pointer-events:none;opacity:0;transition:opacity .15s;white-space:nowrap;}

JavaScript

(function(){
          var root=document.currentScript.parentElement.querySelector('.d08-06-02');
          var label=root.querySelector('.d08-06-02-label');
          root.addEventListener('mousemove',function(e){
            var r=root.getBoundingClientRect();
            var x=e.clientX-r.left, y=e.clientY-r.top;
            label.style.transform='translate('+(x+14)+'px,'+(y+14)+'px)';
            var zone=e.target.closest('.d08-06-02-zone');
            if(zone){label.textContent=zone.dataset.label;label.style.opacity=1;}
            else{label.style.opacity=0;}
          });
          root.addEventListener('mouseleave',function(){label.style.opacity=0;});
        })();

クラス名 .d08-06-02 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。