Изменение курсора мыши cursor:(путь к иконе), pointer;

349

26 сентября 2017, 04:53

Господа, читаю документацию, вроде все понятно и проще пареной перы...

    .cur { 
        width: 100px; 
        height: 100px; 
        border: 1px solid orange; 
         font-size: 20px; 
    } 
 
    #cur_1 { 
 
        cursor: url(http://webcodius.ru/images/cursor.cur), pointer; 
    } 
    #cur_2 { 
 
        cursor: url(http://1.bp.blogspot.com/-uIY8CwnjM-c/VHbcXXC9HmI/AAAAAAAAAT8/3uwp5nSIWEU/s1600/Mouse%2BIcon.png), pointer; 
    } 
    #cur_3 { 
    	 cursor: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzhweCIgaGVpZ2h0PSIzOHB4IiB2aWV3Qm94PSIwIDAgMzggMzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDMuOC4zICgyOTgwMikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+em9vbS1jdXJzb3I8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBkPSJNMjUsMTIgQzI1LDE4LjYzIDE5LjYyNywyNCAxMywyNCBDNi4zNzIsMjQgMSwxOC42MyAxLDEyIEMxLDUuMzcgNi4zNzIsMCAxMywwIEMxOS42MjcsMCAyNSw1LjM3IDI1LDEyIFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgICAgICA8ZmlsdGVyIHg9Ii01MCUiIHk9Ii01MCUiIHdpZHRoPSIyMDAlIiBoZWlnaHQ9IjIwMCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci0yIj4KICAgICAgICAgICAgPGZlT2Zmc2V0IGR4PSIxIiBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSI+PC9mZU9mZnNldD4KICAgICAgICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMy41IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVHYXVzc2lhbkJsdXI+CiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwICAgMCAwIDAgMCAwICAgMCAwIDAgMCAwICAwIDAgMCAwLjEwOTYyOTc1NSAwIiB0eXBlPSJtYXRyaXgiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+CiAgICAgICAgPC9maWx0ZXI+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iem9vbS1jdXJzb3IiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUuMDAwMDAwLCA1LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iU3ZnanNTdmcxMDAwIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJTdmdqc1BhdGgxMDA3Ij4KICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjEiIGZpbHRlcj0idXJsKCNmaWx0ZXItMikiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMuMDAwMDAwLCAxMi41MDAwMDApIHJvdGF0ZSgtMzE1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMy4wMDAwMDAsIC0xMi41MDAwMDApIHRyYW5zbGF0ZSg0LjAwMDAwMCwgNC4wMDAwMDApIiBzdHJva2U9IiMzMzM0MzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTksMTcgTDksOC44ODE3ODQyZS0xNSIgaWQ9IkxpbmUiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMC41LDguNSBMMTcuNSw4LjUiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) 16 16, crosshair; 
    } 
    #cur_4 { 
    	/*а это путьк той же картинке из cur_2 скаченная ко мне на комп*/ 
 
        cursor: url(Icon/Mouse_Icon.png), pointer; 
 
    } 
    #cur_5 { 
    	/*а это путьк той же картинке из cur_2 скаченная ко мне на комп*/ 
 
        cursor: url(Icon/Mouse Icon.png), pointer; 
 
    }

    <div id="cur_1" class="cur">1</div> 
    <div id="cur_2" class="cur">2</div> 
    <div id="cur_3" class="cur">3</div> 
    <div id="cur_4" class="cur">4</div> 
    <div id="cur_5" class="cur">5</div>

....НО, есть большое НО...

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

А еще нашел аналогичный вопрос, но там нет моего решения вопроса, там есть (аналог моего вопроса) ссылка на конвертор, но у меня даже после конвертации картинки не сработало...

Вопрос, что я делаю не так???

Как я понял, формат cur, работает везде, а вот остальные нет...

Answer 1

Согласно документации MDN, изображение, подключаемое в качестве курсора через url(), не должно своими размерами превышеть 128x128 пикселей. Изображение, которое вы пытаетесь подключать в примере имеет размер 512x512 пикселей, поэтому оно просто игнорируется браузером.

.cur { 
  width: 100px; 
  height: 100px; 
  border: 1px solid orange; 
  font-size: 20px; 
} 
 
#cur_1 { 
  cursor: url(http://webcodius.ru/images/cursor.cur), pointer; 
} 
 
#cur_2 { 
  /* 512x512 */ 
  cursor: url(https://i.stack.imgur.com/d9BcV.png), pointer; 
} 
 
#cur_3 { 
  /* 128x128 */ 
  cursor: url(https://i.stack.imgur.com/eSWUB.png), pointer; 
} 
 
#cur_4 { 
  /* без курсора */ 
  cursor: none; 
}

<div id="cur_1" class="cur">1</div> 
<div id="cur_2" class="cur">2</div> <!-- 512x512 --> 
<div id="cur_3" class="cur">3</div> <!-- 128x128 --> 
<div id="cur_4" class="cur">4</div> <!-- без курсора -->

Все тот же MDN рекомендует не подключать изображения для курсоров больше 32x32 пикселей для большей совсместимости с браузерами.

А на случай, если нужно сделать курсор больше 128x128 пикселей, можно на js написать простенький код, который будет выводить ваше изображение по координатам курсора.

UPDATE: Список значений cursor, которые не поддерживаются в некоторых браузерах.