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

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

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

Значение Описание
autoФорма курсора зависит от области контекста, в которой она закончилась. Например, I над текстом, «рука» по ссылке и т.д.
crosshairЗнак перекрестия или плюс
defaultСтрелка
pointerУказательная ручка (в IE 4 это значение - рука).
moveПерекрестье
e-resizeКурсор указывает, что край окна должен быть перемещен вправо (восток).
ne-resizeКурсор указывает, что край окна должен быть перемещен вверх и вправо (север / восток).
nw-resizeКурсор указывает, что край окна должен быть перемещен вверх и влево (север / запад).
n-resizeКурсор указывает, что край окна должен быть перемещен вверх (север).
se-resizeКурсор указывает, что край окна должен быть перемещен вниз и вправо (на юг / восток).
sw-resizeКурсор указывает, что край окна должен быть перемещен вниз и влево (на юг / запад).
s-resizeКурсор указывает, что край окна должен быть перемещен вниз (на юг).
w-resizeКурсор указывает, что край окна должен быть перемещен влево (на запад).
textКурсор I.
waitЧасы или вращающийся круг.
helpВопросительный знак или воздушный шар, идеально подходит для использования через кнопки справки.
< url >Источник файла изображения курсора.

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

Вот пример -

< 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>

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



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



Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok