Назначить цвет курсору мыши с помощью CSS

Ответ 1

Использовать изображение вместе с свойством CSS cursor, я не вижу необходимости в JavaScript...

Демо

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

Как я уже говорил, я использовал auto, который не что иное, как default cursor, просто заставляет ваше изображение не загружаться, точно так же, как мы объявляем несколько семейств шрифтов.

Ответ 2

Просто добавьте возможность динамически добавлять курсор, не предоставляя изображение, но генерируя его на клиенте с помощью JavaScript и Canvas.

Демо содержит простой курсор, нарисованный с помощью фигур, но это может быть так же легко, как изображения, видео и т.д. (все, что поддерживает холст).

Fiddle (обновлено 5/2016 для Firefox - перемещено из документа в элемент).

Примечание. У FireFox есть проблема, когда курсор изменяется так часто, как в этой демонстрации - обновляется, чтобы меняться только один раз в секунду. FF очищает курсор при установке нового изображения, но поскольку новое изображение необходимо декодировать, оно показывает значение по умолчанию в среднем времени. Chrome ждет, пока изображение не будет декодировано до переключения.

В любом случае просто показать, что это можно сделать, используя демонстрацию canvas-test с помощью 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';
}

Ответ 3

Вы должны создать/искать настраиваемый курсор. Затем используйте свойство cursor CSS, чтобы включить его на свой сайт.

Вот учебник для этого здесь: http://www.axialis.com/tutorials/use-cursors-to-customize-websites.htm

Ответ 4

Я использовал свой собственный курсор до сегодняшнего дня. Синяя версия стандартной стрелки. PNG файл с альфа-прозрачной тенью. Я люблю это. Но теперь я обновился до 4K, и PNG логически не будет масштабироваться, поэтому он выглядит крошечным. Любое решение для этого? Пока я использую перекрестие, потому что я не могу выдержать этот ручной курсор.

Если бы это: cursor: url (img/pointer_blue.png), auto;

Теперь это: cursor: crosshair;