Cursor Property in HTML

Cursor Property in HTML | Pointer Property in HTML

Spread the love

The pointer property of CSS permits you to specify the sort of pointer that ought to be presented to the user.

One sensible usage of this property is in victimization pictures for submit buttons on forms. By default, once a pointer hovers over a link, the pointer changes from a pointer to a hand. However, it doesn’t modification type|the shape} for a submit button on a form. Therefore, whenever somebody hovers over a picture that’s a submit button, it provides a visible clue that the image is clickable.

The pointer property is such as zero or a lot of values, separated by commas, followed by one necessary keyword worth. everyone ought to purpose to a picture file. The browser can attempt to load the primary image such, as falling back to consecutive if it cannot, and falling back to the keyword worth if no pictures may well be loaded (or if none were specified).

Each is also optionally followed by a try of space-separated numbers, that represent coordinates. These can set the cursor’s hotspot, relative to the top-left corner of the image.

For example, this specifies 2 pictures victimization values, providing coordinates for the second, and falling back to the progress keyword worth if neither image is often loaded:

The following table shows the attainable values for the pointer property −

CSS cursor Property | How to change cursor point in HTML?

alias.alias {cursor: alias;}
all-scroll.all-scroll {cursor: all-scroll;}
auto .auto {cursor: auto;}
cell.cell {cursor: cell;}
context-menu.context-menu {cursor: context-menu;}
col-resize.col-resize {cursor: col-resize;}
copy.copy {cursor: copy;}
crosshair.crosshair {cursor: crosshair;}
default .default {cursor: default;}
e-resize.e-resize {cursor: e-resize;}
ew-resize.ew-resize {cursor: ew-resize;}
grab.grab {cursor: grab;}
grabbing .grabbing {cursor: grabbing;}
help .help {cursor: help;}
move .move {cursor: move;}
n-resize.n-resize {cursor: n-resize;}
ne-resize.ne-resize {cursor: ne-resize;}
nesw-resize.nesw-resize {cursor: nesw-resize;}
ns-resize.ns-resize {cursor: ns-resize;}
nw-resize.nw-resize {cursor: nw-resize;}
nwse-resize.nwse-resize {cursor: nwse-resize;}
no-drop.no-drop {cursor: no-drop;}
none .none {cursor: none;}
not-allowed .not-allowed {cursor: not-allowed;}
pointer .pointer {cursor: pointer;}
progress .progress {cursor: progress;}
row-resize.row-resize {cursor: row-resize;}
s-resize.s-resize {cursor: s-resize;}
se-resize.se-resize {cursor: se-resize;}
sw-resize.sw-resize {cursor: sw-resize;}
text .text {cursor: text;}
url .url {cursor: url(myBall.cur),auto;}
w-resize.w-resize {cursor: w-resize;}
wait .wait {cursor: wait;}
zoom-in .zoom-in {cursor: zoom-in;}
zoom-out.zoom-out {cursor: zoom-out;}

output:-

Class NameAdd Style
alias.alias {cursor: alias;}
all-scroll.all-scroll {cursor: all-scroll;}
auto.auto {cursor: auto;}
cell.cell {cursor: cell;}
context-menu.context-menu {cursor: context-menu;}
col-resize.col-resize {cursor: col-resize;}
copy.copy {cursor: copy;}
crosshair.crosshair {cursor: crosshair;}
default.default {cursor: default;}
e-resize.e-resize {cursor: e-resize;}
ew-resize.ew-resize {cursor: ew-resize;}
grab.grab {cursor: grab;}
grabbing.grabbing {cursor: grabbing;}
help.help {cursor: help;}
move.move {cursor: move;}
n-resize.n-resize {cursor: n-resize;}
ne-resize.ne-resize {cursor: ne-resize;}
nesw-resize.nesw-resize {cursor: nesw-resize;}
ns-resize.ns-resize {cursor: ns-resize;}
nw-resize.nw-resize {cursor: nw-resize;}
nwse-resize.nwse-resize {cursor: nwse-resize;}
no-drop.no-drop {cursor: no-drop;}
none.none {cursor: none;}
not-allowed.not-allowed {cursor: not-allowed;}
pointer.pointer {cursor: pointer;}
progress.progress {cursor: progress;}
row-resize.row-resize {cursor: row-resize;}
s-resize.s-resize {cursor: s-resize;}
se-resize.se-resize {cursor: se-resize;}
sw-resize.sw-resize {cursor: sw-resize;}
text.text {cursor: text;}
url.url {cursor: url(myBall.cur),auto;}
w-resize.w-resize {cursor: w-resize;}
wait.wait {cursor: wait;}
zoom-in.zoom-in {cursor: zoom-in;}
zoom-out.zoom-out {cursor: zoom-out;}

cursor point change is very easy on your HTML page. first, add cursor class and now add style and now see your output. The following table shows the values how to add class pointer property

example 1:-

<div style="cursor: zoom-in;">
<img src="https://i.ibb.co/X3qC3fG/03.jpg" width="500px"/>
</div>

output:-


example 2:-

<html>
<head>
<style>
.zoom-in {cursor: zoom-in;}
</style>
</head>
<body>
<div class="zoom-in">
<img src="https://i.ibb.co/X3qC3fG/03.jpg" width="500px"/>
</div>
</body>
</html>

output:-



Spread the love

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *