Some elements of web pages change their appearance on hovering with the mouse - this is by default prescribed for them by the settings of the HTML language (HyperText Markup Language - "Hypertext Markup Language"). This language has tools that allow you to change the same settings for other page elements. If necessary, you can use both CSS (Cascading Style Sheets) and the client-side JavaScript scripting language for this purpose.
Instructions
Step 1
Use the style attribute to be able to set the cursor variable in the tag of the web page object of interest to you. For example, the HTML code of an input text field that instructs the visitor's browser to change the appearance of the cursor in the same way as when hovering over a link, can be written like this:
Step 2
Select the desired cursor appearance from the list of valid values for the cursor parameter. In the example shown in the previous step, the value of pointer is used - the value of hand has exactly the same effect. In addition to these two values, the following options for the appearance of the cursor are provided: crosshair, e-resize, help, move, n-resize, ne-resize, nw-resize, progress, s-resize, se-resize, sw-resize, text, w -resize, wait. For example, to make the cursor look like a double-headed arrow from the upper left to the lower right in the above code sample, use nw-resize instead of pointer:
The letters in front of the resize value help to determine in which directions the arrow is directed by this value - they, like on a compass, correspond to the designations of the cardinal points. For example, nw stands for nord-west (northwest), s for south (south), etc.
Step 3
Use the file URL instead of the predefined values if you uploaded your own cursor image in its native cur format. To do this, use the following syntax:
<input style = "cursor: url (https://someSite.ru/someCursor.cur) "/>
If the file is located in the same folder as the page or in a subfolder, then instead of an absolute address, you can specify a relative one.
Step 4
Use the onmouseover attribute if you want to change the appearance of the cursor using JavaScript. For example:
This code will work exactly like the sample in step two.
