Почему не работает url() у cursor?

Ссылка скопирована
CSS HTML JavaScript
1 ответ

В папке static лежит файл style.css, index.html и сама картинка(исключая несколько файлов js, они тут роли не играют). В css файле пишу:

#canvas {     cursor: url('hand.png'), pointer; }

#canvas { cursor: url('hand.png'), pointer; }

и отображается именно pointer. Пробовал писать со static, пробовал без кавычек (в VScode тогда файл отображался как ссылка и я мог перейти по ней увидев саму картинку), но ничего из этого не помогло, иногда даже выходила ошибка, говорящая что не может hand.png найти. При том коде, что я выложил, такой ошибки нет, но отображается именно pointer
CSS подключен к html нормально, без бед

Почему не работает url() у cursor?

Дополнительно:

А укажи путь через ./

  • bit8, не помогло
  • И не должно было помочь - менять один относительный путь на другой нет никакого смысла. Путь должен быть абсолютным от корня веб-сервера. Скорее всего, просто /hand.png.
  • Алексей Уколов, тоже не помогло
  • А по адресу http://%site.domain%/hand.png картинка открывается? Нужно найти такой адрес, по которому она откроется (добавлять директории от корня веб-сервера, пока не дойдёте до директории с картинкой) и указать его (без домена) в url().
  • Алексей Уколов, по адресу открывается
  • kaliboba, а если так 
    #canvas {     cursor: url('hand.png') 0 0, pointer; }

    #canvas { cursor: url('hand.png') 0 0, pointer; }

  • Владимир, не работает((
  • kaliboba, попробуй картинку конвертнуть в свг и ее вставить
  • Владимир, тоже не сработало
  • Может с размерами иконки беда какая
    если ее уменьшить до 10*10 (или 20*20), то будет работать?
    Вот на хабре дернул иконку, вставил как курсор - работает
    Тест - для любого элемента в консоли задать 
    cursor: url(https://assets.habr.com/qna/6516ca7e/images/search-filters-arrow.svg) 0 0, not-allowed;

    cursor: url(https://assets.habr.com/qna/6516ca7e/images/search-filters-arrow.svg) 0 0, not-allowed;

  • Владимир, о, эта сработала, значит явно что-то с размерами
  • Владимир, но какие бы я значения не ставил - не появляется
  • kaliboba, тогда тут смотреть)
    https://developer.mozilla.org/en-US/docs/Web/CSS/c...
  • kaliboba,

    о, эта сработала, значит явно что-то с размерами

    ну тогда и картинку hand.png к вопросу прикрепили бы

  • посмотреть ее в developer console, попробовать открыть по тому линку, который там отображается
  • не пойму в чём проблема. Если по адресу url('hand.png') картинка с рукой зачем эти все излишества. А не проще ли просто написать#canvas {cursor: pointer;} Не понятно, к чему это всё. Тем более что это не работает. А если указывать путь то полный путь до корневой папки. kaliboba, укажи полный путь до корневой папки.

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Дмитрий К. Ответ

    Чтобы понять, почему не работает url() у cursor, следует учитывать несколько возможных причин.

    1. Проверьте, что вы правильно используете функцию url() в CSS. Функция url() предназначена для указания пути к файлу, который будет использоваться в качестве значения свойства cursor. Например:

    cursor: url('path/to/cursor.png'), auto;

    cursor: url('path/to/cursor.png'), auto;

    2. Убедитесь, что путь к файлу указан правильно. Проверьте, что путь начинается с правильного корневого каталога и что все символы в пути к файлу написаны верно.

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

    4. Убедитесь, что указанный файл является файлом изображения, который поддерживается для использования в качестве курсора. Обычно поддерживаются форматы PNG, GIF и CUR.

    5. Проверьте поддержку браузером указанного типа курсора. Некоторые браузеры могут не поддерживать определенные типы курсоров или специфические форматы файлов.

    Если после выполнения всех этих шагов проблема не решена, попробуйте проверить ваш код на наличие других ошибок или конфликтов, которые могут повлиять на отображение курсора. Если проблема сохраняется, уточните вопрос, предоставив больше информации о своем коде и окружении, чтобы получить более точный ответ.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ SMM Из-за чего не сохраняется видео в мобильной программе blackmagic? 1 ответ