Курсор не поворачивается по краю - PullRequest
Новая
       13

Курсор не поворачивается по краю

0 голосов
/ 23 марта 2020

Добрый вечер, ребята, я добавил эти строки кода css на свой сайт, превращает курсор в изображение, работает в любом браузере, кроме как на краю. В чем может быть моя проблема, я сделал что-то не так? 

  #arr-left{
    position:relative;
    cursor: url('http://mysito/wp-content/uploads/2020/03/left-arrow.png') ,auto;   
    }

1 Ответ

0 голосов
/ 24 марта 2020

Насколько я знаю, и IE, и устаревшая версия Microsoft Edge поддерживают только файлы .cur в свойстве курсора url. Поскольку New Microsoft Edge основан на Chromium, браузер New Microsoft Edge и Chrome будут поддерживать файл типа .png и файл типа .cur. Вы можете проверить эти похожие темы: Курсор настройки Edge не работает и Пользовательский курсор в Microsoft Edge имеет смещение

В качестве обходного пути я предлагаю изменить формат изображения из файла .png в файл .cur. Вы можете использовать Google или Bing для поиска «.cur editor», а затем конвертировать .png файл в .cur файл.

Кроме того, я создал образец для его проверки. Файл .cur хорошо работает в IE 11, устаревшей версии Microsoft Edge, New Microsoft Edge и Chrome browser. Вы можете проверить это: 

<style>

    #arr-left {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: aquamarine;
    }

    @media screen and (-webkit-min-device-pixel-ratio:0) {
        #arr-left {
            cursor: url('http://cur.cursors-4u.net/others/oth-7/oth697.cur'),auto;
        }
    }

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        /* IE10+ CSS styles go here */
        #arr-left {
            /*cursor: url('http://cur.cursors-4u.net/others/oth-7/oth697.cur'), pointer;*/
            cursor:url("Images/left-arrow.cur"), auto;
        }
    }

    @supports (-ms-ime-align:auto) {
        /* Edge 16+ CSS */
        #arr-left {
            /*cursor: url('http://cur.cursors-4u.net/others/oth-7/oth697.cur'), pointer;*/
            cursor: url("Images/left-arrow.cur"), auto;
        }
    }
</style>
<div id="arr-left">
    content
</div>

Снимок экрана на моей локальной стороне, как показано ниже (с использованием IE 11 и Microsoft Edge 44.18362.449.0):

enter image description here

...