CSSカスタムマウスカーソルのサイズ変更

Question

カスタムイメージURLを使用するCSSマウスカーソルのサイズを変更することはできますか？たとえば：

イメージが大きすぎます。イメージURLを設定してスタイルを設定する方法を見つけられませんでした。私はちょうど新しいサイズでイメージを保存することができますが、私はむしろ可能であればクライアント上でサイズを設定したいと思います。

Answer 1

これをチェックすると、ネイティブにカーソルのサイズを変更することはできないと思います。

cursor: none; 

そして、それはそのwidthとheightのため、CSSを使用してカーソルを次の画像、およびスタイルを使用する：あなたができることの一つは、次のコードを使用してカーソルを非表示にすることです。これは一般的な習慣です。

ちょうど何かを試してみました：

$(function() { 
 
    $("#testarea").mousemove(function (e) { 
 
    $(".cursor").show().css({ 
 
     "left": e.clientX, 
 
     "top": e.clientY 
 
    }); 
 
    }).mouseout(function() { 
 
    $(".cursor").hide(); 
 
    }); 
 
});

#testarea { 
 
    border: 1px dashed #ccc; 
 
    height: 100px; 
 
    cursor: none; 
 
} 
 
.cursor { 
 
    position: absolute; 
 
    width: 25px; 
 
    height: 25px; 
 
    left: -100px; 
 
    cursor: none; 
 
    pointer-events: none; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
<div id="testarea"></div> 
 
<img src="//placehold.it/200?text=Cursor" alt="Cursor" class="cursor" />