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

カーソル形状のホバー変化(丸→矢印)

通常は丸いカーソルがリンク上でホバーすると矢印形状にモーフィングします。ナビゲーションのインタラクション強化に使えます。

hoverjs

プレビュー

ソースコード

HTML

<a href="javascript:void(0)" class="d08-06-09-link">リンクテキスト</a>
        <span class="d08-06-09-cursor"></span>

CSS

.d08-06-09{cursor:none;}
        .d08-06-09-link{color:#4a6cf7;font-size:14px;text-decoration:underline;}
        .d08-06-09-cursor{position:absolute;left:0;top:0;width:24px;height:24px;margin-left:-12px;margin-top:-12px;background:#333;pointer-events:none;clip-path:circle(50%);transition:clip-path .2s,background .2s;}
        .d08-06-09-cursor.d08-06-09-arrow{background:#4a6cf7;clip-path:polygon(0 0,100% 40%,55% 55%,40% 100%);}

JavaScript

(function(){
          var root=document.currentScript.parentElement.querySelector('.d08-06-09');
          var cursor=root.querySelector('.d08-06-09-cursor');
          root.addEventListener('mousemove',function(e){
            var r=root.getBoundingClientRect();
            cursor.style.transform='translate('+(e.clientX-r.left)+'px,'+(e.clientY-r.top)+'px)';
          });
          root.addEventListener('mouseover',function(e){
            if(e.target.closest('.d08-06-09-link'))cursor.classList.add('d08-06-09-arrow');
          });
          root.addEventListener('mouseout',function(e){
            if(e.target.closest('.d08-06-09-link'))cursor.classList.remove('d08-06-09-arrow');
          });
        })();

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