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

Question

Как назначить цвет курсору мыши на веб-странице?

Может ли кто-нибудь предложить мне способ сделать это, используя любую из технологий, например. HTML, CSS, JavaScript?

Answer 1

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

Demo

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

---

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

Answer 2

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

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

Answer 3

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

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

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

Примечание. У FireFox возникает проблема, когда курсор изменяется так часто, как в этой демонстрации - обновляется, чтобы меняться только один раз в секунду. 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'; 
} 

Answer 4

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

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

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