Примеры оформления курсора мыши на HTML и CSS

• Порядок оформления курсора мыши в CSS
• Примеры изменения внешнего вида курсора

Подробнее о свойствах, связанных с курсором мыши, смотрите в нашем учебнике по CSS здесь.

Для того, чтобы в качестве курсора мыши установить свое изображение, необходимо в качестве значения свойства cursor использовать путь к файлу изображения (например, cursor: url("smile.png"), auto;). Разрешается указывать через запятую путевые адреса сразу к нескольким файлам изображений; при этом важно помнить, что поддерживаются не все форматы изображений, а только форматы CUR, PNG, GIF, JPG (анимация в формате GIF работать не будет, также старайтесь ограничивать размеры изображений в пределах 128x128 пикселей, т.к. изображения слишком больших размеров отображаться не будут); кроме того, после адреса или списка адресов нужно обязательно указать через запятую одно из стандартных значений (см. §5.5).

Ниже созданы несколько абзацев, при наведении на которые стандартный курсор будет изменен на наш собственный (смотрите оформление в таблице стилей).

В данном абзаце в качестве курсора мы использовали изображение в формате GIF. Однако анимация работать не будет, хотя само изображение показывается.

В данном абзаце в качестве курсора мы использовали изображение в формате CUR.

В данном абзаце в качестве курсора мы использовали изображение в формате PNG размером 32x32 пикселя.

А вот здесь будет использован стандартный курсор, т.к. мы превысили допустимый размер изображения на один пиксель (129x129 пикселей).