Thanks to the specification CSS we will be able to modify the properties related to the mouse pointer. And, in this way, have multiple ways to see the mouse pointers with CSS. We can modify these shapes depending on the element we are on. That is, it is not the same as wanting to modify it to offer help, to be able to indicate that the object can move around the page or that we can select content. The possibilities are many.
What we need to know to modify the mouse pointer is that we must use the property
cursor
which has the following syntax:
cursor : [ [<url> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cells | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ] ]
Among the values assigned to it we find some such as:
- crosshair, with a cross style to be able to select a point in an image.
- pointer is the cursor that is usually used on links and is shaped like a hand.
- move, cursor that would show when an element can be moved within the page.
- text, cursor that displays a bar so that the text can be selected.
- wait, cursor that indicates that calculations are being made in the program and it is busy.
- help, cursor that serves to indicate that there is help associated with the element on which we are positioned.
- e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, cursors to resize elements to different positions.
- default, the default cursor is usually an arrow.
To apply it to an element HTML, we will use the element
style
. For example, we are going to apply it to a link, that is, to an element of the type
a
:
<a href="#" style="cursor:crosshair;">Link</a>
In this simple way we have been able to configure the mouse pointers with CSS. Which of the mouse pointers have you used or are you considering using in the designs of your web pages?