Свойство 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>

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



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



We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok