Стили курсоров в CSS

Свойство cursor CSS позволяет указать тип курсора, который должен отображаться пользователю.

Одно из преимуществ этого свойства заключается в использовании изображений для кнопок отправки в формах. По умолчанию, когда курсор наводится на ссылку, курсор меняется от указателя к руке. Однако он не меняет форму для кнопки отправки в форме. Следовательно, всякий раз, когда кто-то наводится на изображение, которое является кнопкой отправки, он обеспечивает визуальную подсказку о том, что изображение можно щелкнуть.

В следующей таблице показаны возможные значения для свойства курсора -

ПРИМЕЧАНИЕ. Вы должны попытаться использовать только эти значения, чтобы добавить полезную информацию для пользователей, и в местах они ожидали бы увидеть этот курсор. Например, использование перекрестия, когда кто-то наводит курсор на ссылку, может смутить посетителей.

Вот пример -

< html>
   < head>
   < /head>
  
   < body>
      < p>Move the mouse over the words to see the cursor change:< /p>
     
      < div style="cursor:auto">Auto< /div>
      < div style="cursor:crosshair">Crosshair< /div>
      < div style="cursor:default">Default< /div>
      < div style="cursor:pointer">Pointer< /div>
      < div style="cursor:move">Move< /div>
      < div style="cursor:e-resize">e-resize< /div>
      < div style="cursor:ne-resize">ne-resize< /div>
      < div style="cursor:nw-resize">nw-resize< /div>
      < div style="cursor:n-resize">n-resize< /div>
      < div style="cursor:se-resize">se-resize< /div>
      < div style="cursor:sw-resize">sw-resize< /div>
      < div style="cursor:s-resize">s-resize< /div>
      < div style="cursor:w-resize">w-resize< /div>
      < div style="cursor:text">text< /div>
      < div style="cursor:wait">wait< /div>
      < div style="cursor:help">help< /div>
   < /body>
  
< /html>

Это приведет к следующему результату, наведите курсор мыши на слова, чтобы увидеть изменение курсора.

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!