Я хотел бы узнать, как создать простой файл HTML, в котором мой курсор заменяется на пользовательское изображение, а также отслеживается без задержки на странице (та же функция, что и в моей ОС Mac, но я хочу использовать новый курсор для проекта с графическим интерфейсом).
Я прочитал все правила свойств CSS¹. Проблема в том, что они работают только при наведении курсора на атрибут div или кнопку, когда я хочу, чтобы он работал постоянно.
Чтобы использовать пользовательское изображение, вы можете использовать свойство cursor: url внутри класса и указать путь к вашему изображению, которым вы хотите заменить курсор.
.cursor {
cursor: url("image-path.png");
}
Если вы хотите применить курсор ко всей странице, вы можете добавить правило CSS к элементу html.
<html>
<head>
<style>
html {
cursor: url("https://i.imgur.com/8Jhi9oS.png"), auto;
}
</style>
<body>
This page has a custom cursor!
</body>
</html>url("47a.jpg"). Дополнительные сведения см. в разделе Пути к файлам HTML.
- person Skully; 26.04.2021
url() верны в соответствии с расположением вашего HTML-файла? Он должен работать независимо от того, является ли расширение файла .cur файлом или нет.
- person Skully; 26.04.2021
Эй, если вы имеете в виду, что хотите, чтобы курсор был пользовательским везде на этой странице, вы можете использовать это:
body {
cursor: url('path-to-image.png'), auto;
}
Если вы хотите, чтобы это было только в определенных частях веб-сайта, вы можете изменить тело на класс, тег или идентификатор.
Оформить заказ https://css-tricks.com/using-css-cursors/ для получения дополнительной информации
, auto?
- person connexo; 26.04.2021
height, но что он делает в cursor ?
- person connexo; 26.04.2021
У вас не может быть эффекта курсора на весь экран, но вы можете иметь его в body:
body {
cursor: url('mycustomcursor.cur');
}Если у вас есть изображение, которое вы хотите использовать, вам придется запустить его через конвертер, например Редактор курсоров и используйте файл .cur для URL.
html. Смотрите мой ответ для примера этого.
- person Skully; 26.04.2021
body, хотя это вступает в силу только тогда, когда в теле есть элементы, на которых должен быть активен курсор - он не покрывает всю страницу полностью, тогда как если вы примените правило к самому элементуhtml, вы можете применить курсор ко всей всей странице независимо от того, где находится курсор на странице, см. мой ответ для получения дополнительной информации. - person Skully schedule 26.04.2021.cssдля записи всех ваших свойств и импортируйте это в свой HTML-файл, или вы можете добавить правило непосредственно вверху страницы в своем заголовке, используя код<style>, я обновил свой ответ примером этого. - person Skully schedule 26.04.2021