web-dev-qa-db-ja.com

CSSを使用してマウスカーソルに色を割り当てる

Webページのマウスカーソルに色を割り当てるにはどうすればよいですか？

誰かが私に技術のいずれかを使用してそれを行う方法を提案できますか？ HTML、CSS、JavaScript？

javascripthtmlcsscursorcustom-cursor
17
Rajesh Paul

CSS cursorプロパティと一緒に画像を使用してください。JavaScriptの必要性はわかりません...

デモ

div {
   cursor: url(YOUR_IMAGE_URL), auto;
}

コメントしたように、私はautoを使用しました。これは、複数のフォントファミリを宣言するのとまったく同じように、画像の読み込みに失敗した場合に備えてdefault cursorに他なりません。

17
Mr. Alien

画像を提供せずに、JavaScriptとCanvasを使用してクライアント上でカーソルを動的に追加する可能性を追加するだけです。

デモには、図形で描かれた単純なカーソルが含まれていますが、これは画像やビデオなど（キャンバスがサポートするすべてのもの）と同じくらい簡単です。

フィドル（Firefox用に2016年5月に更新-ドキュメントから要素に移動）。

注：FireFoxは、このデモのようにカーソルが頻繁に変更されると問題が発生します。1秒に1回だけ変更されるように更新されています。 FFは、新しい画像を設定するときにカーソルをクリアしますが、新しい画像をデコードする必要があるため、その間にデフォルトが表示されます。 Chromeは、画像がデコードされるまで待ってから切り替えます。

いずれにせよ、それはキャンバスを使用して実行できることを示すだけです-Chromeを使用してデモをテストし、マウスをそれほど頻繁に変更しないでください:-)。

ここでランダムに色を変えて示すアニメーションループ：

function loop() {

    var color = 'rgb(' + ((255 * Math.random())|0) + ','
                       + ((255 * Math.random())|0) + ','
                       + ((255 * Math.random())|0) + ')';
    makeCursor(color);

    setTimeout(loop, 1000);
}

カーソルメーカー：

function makeCursor(color) {

    // create off-screen canvas
    var cursor = document.createElement('canvas'),
        ctx = cursor.getContext('2d');

    cursor.width = 16;
    cursor.height = 16;

    // draw some shape for sake of demo
    ctx.strokeStyle = color;

    ctx.lineWidth = 2;
    ctx.moveTo(2, 10);
    ctx.lineTo(2, 2);
    ctx.lineTo(10, 2);
    ctx.moveTo(2, 2);
    ctx.lineTo(30, 30)    
    ctx.stroke();

    // set image as cursor (modern browsers can take PNGs as cursor).
    element.style.cursor = 'url(' + cursor.toDataURL() + '), auto';
}
18
user1693593

カスタマイズされたカーソルを作成/検索する必要があります。次に、cursor CSSプロパティを使用して、Webサイトに含めます。

ここにこれに関するチュートリアルがあります：http://www.axialis.com/tutorials/use-cursors-to-customize-websites.htm

1
maikelsabido

今日まで自分のカーソルを使っていました。標準矢印のブルーバージョン。アルファ透明シャドウ付きのPNGファイル。私はそれが好きだった。しかし、今は4Kにアップグレードしましたが、PNGは論理的にスケーリングされないため、小さく見えます。これに対する解決策はありますか？今のところ私は十字線を使用しています。'cos私はその手のカーソルに耐えられません。

これを持っていた：カーソル：url（img/pointer_blue.png）、auto;

今では：カーソル：十字線;

0
Ole Sørensen