Кросс-браузерный пользовательский стиль курсора - PullRequest
Новая
       6

Кросс-браузерный пользовательский стиль курсора

6 голосов
/ 05 июля 2011

Я отображаю карту мира тегом img. Я связываю карту изображения с этим, чтобы связать некоторые области. Я накладываю рамку с рамкой, указывающую, что можно щелкнуть и увеличить определенную область.

Теперь, чтобы показать пользователю, что он делает это, я хочу, чтобы курсор изменил форму лупы. Я просмотрел сеть и нашел что-то, что работает в Firefox и ie6-8: 

#zoomregion:hover { cursor: url('templates/test/styles/images/magnify.cur'), -moz-zoom-in; }

К сожалению, Opera, Chrome и ie9 игнорируют его и показывают значение по умолчанию (т.е. указатель). Как я могу использовать кросс-браузерные пользовательские значки курсора?

1 Ответ

0 голосов
/ 02 июня 2017

-moz- часть -moz-zoom-in; означает, что она предназначена только для Mozilla, чтобы сделать ее кросс-браузерной, вам нужны все теги в одном теге id css: 

#zoomregion:hover { 
    cursor: url('templates/test/styles/images/magnify.cur');
    -webkit-zoom-in;
    -moz-zoom-in;
    -ie-zoom-in;
    -ms-zoom-in;
    -o-zoom-in;
}

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

...