The cursor style is used to specify the mouse cursor to be displayed while pointing on an element.
Cursor Value:
- alias: This property is used to display the cursor’s indication of something is to be created.
- all-scroll: In this property, the cursor indicates scrolling.
- auto: This is the default property where the browser sets a cursor.
- cell: In this property, the cursor indicates a cell or set of cells are selected.
- context-menu: In this property, the cursor indicates that a context menu is available.
- col-resize: In this property, the cursor indicates that the column can be resized horizontally.
- copy: In this property, the cursor indicates something is to be copied.
- crosshair: In this property, the cursor renders as a crosshair.
- default: The default cursor.
- e-resize: In this property, the cursor indicates an edge of a box is to be moved to the right.
- ew-resize: In this property, the cursor indicates a bidirectional resize cursor.
- help: In this property, the cursor indicates that help is available.
- move: In this property, the cursor indicates something is to be moved
- n-resize: In this property, the cursor indicates an edge of a box is to be moved up.
- ne-resize: In this property, the cursor indicates an edge of a box is to be moved up and right.
- nesw-resize: This property indicates a bidirectional resize cursor.
- ns-resize: This property indicates a bidirectional resize cursor.
- nw-resize: In this property, the cursor indicates an edge of a box is to be moved up and left.
- nwse-resize: This property indicates a bidirectional resize cursor.
- no-drop: In this property, the cursor indicates that the dragged item cannot be dropped here.
- none: This property indicates no cursor is rendered for the element.
- not-allowed: In this property, the cursor indicates that the requested action will not be executed.
- pointer: In this property, the cursor is a pointer and indicates link
- progress: In this property, the cursor indicates that the program is busy.
- row-resize: In this property, the cursor indicates that the row can be resized vertically.
- s-resize: In this property, the cursor indicates an edge of a box is to be moved down.
- se-resize: In this property, the cursor indicates an edge of a box is to be moved down and right.
- sw-resize: In this property, the cursor indicates an edge of a box is to be moved down and left.
- text: In this property, the cursor indicates text that may be selected.
- URL: In this property a comma-separated list of URLs to custom cursors and a generic cursor at the end of the list.
- vertical-text: In this property, the cursor indicates vertical-text that may be selected.
- w-resize: In this property, the cursor indicates an edge of a box is to be moved left.
- wait: In this property, the cursor indicates that the program is busy.
- zoom-in: In this property, the cursor indicates that something can be zoomed in.
- zoom-out: In this property, the cursor indicates that something can be zoomed out.
- initial: This property is used to set to its default value.
- inherit: Inherits from its parent element.
Syntax:
$(selector).style.cursor = ”cursor_property_value”;
Examples:
// Change the cursor on complete document $(document).style.cursor = "alias"; // Change the cursor on particular element $("p").style.cursor = "alias"; // Change the cursor on particular element using class $(".curs").style.cursor = "wait"; // Change the cursor on particular element using id $("#curs").style.cursor = "crosshair";
Implementation: This example uses jQuery css() function to display different cursor style.
<!DOCTYPE html> < html >
< head >
< title >
How to change cursor style using jQuery ?
</ title >
< script src =
</ script >
< script type = "text/javascript" >
$(document).ready(function() {
$("input[type='radio']").click(function() {
var radioValue = $("input[name='cursor']:checked").val();
if(radioValue) {
$("#block").css("cursor", radioValue );
}});
});
</ script >
</ head >
< body >
< h1 align = "center" >
Changing cursor style using jQuery
</ h1 >
< div style = "border:2px solid green" >
< table width = "100%" style = "table-layout:fixed;" >
< p align = "center" >
Click on the Radio button to
change the cursor style
</ p >
< tr >
< td >
< input type = "radio" name = "cursor" value = "alias" >
alias
</ td >
< td >
< input type = "radio" name = "cursor" value = "all-scroll" >
all-scroll
</ td >
< td >
< input type = "radio" name = "cursor" value = "auto" >
auto
</ td >
< td >
< input type = "radio" name = "cursor" value = "cell" >
cell
</ td >
</ tr >
< tr >
< td >
< input type = "radio" name = "cursor" value = "context-menu" >
context-menu
</ td >
< td >
< input type = "radio" name = "cursor" value = "col-resize" >
col-resize
</ td >
< td >
< input type = "radio" name = "cursor" value = "copy" >
copy
</ td >
< td >
< input type = "radio" name = "cursor" value = "crosshair" >
crosshair
</ td >
</ tr >
< tr >
< td >
< input type = "radio" name = "cursor" value = "default" >
default
</ td >
< td >
< input type = "radio" name = "cursor" value = "e-resize" >
e-resize
</ td >
< td >
< input type = "radio" name = "cursor" value = "ew-resize" >
ew-resize
</ td >
< td >
< input type = "radio" name = "cursor" value = "help" >
help
</ td >
</ tr >
< tr >
< td >
< input type = "radio" name = "cursor" value = "move" >
move
</ td >
< td >
< input type = "radio" name = "cursor" value = "n-resize" >
n-resize
</ td >
< td >
< input type = "radio" name = "cursor" value = "ne-resize" >
ne-resize
</ td >
< td >
< input type = "radio" name = "cursor" value = "nw-resize" >
nw-resize
</ td >
</ tr >
< tr >
< td >
< input type = "radio" name = "cursor" value = "ns-resize" >
ns-resize
</ td >
< td >
< input type = "radio" name = "cursor" value = "no-drop" >
no-drop
</ td >
< td >
< input type = "radio" name = "cursor" value = "none" >
none
</ td >
< td >
< input type = "radio" name = "cursor" value = "not-allowed" >
not-allowed
</ td >
</ tr >
< tr >
< td >
< input type = "radio" name = "cursor" value = "pointer" >
pointer
</ td >
< td >
< input type = "radio" name = "cursor" value = "progress" >
progress
</ td >
< td >
< input type = "radio" name = "cursor" value = "row-resize" >
row-resize
</ td >
< td >
< input type = "radio" name = "cursor" value = "s-resize" >
s-resize
</ td >
</ tr >
< tr >
< td >
< input type = "radio" name = "cursor" value = "se-resize" >
se-resize
</ td >
< td >
< input type = "radio" name = "cursor" value = "sw-resize" >
sw-resize
</ td >
< td >
< input type = "radio" name = "cursor" value = "text" >
text
</ td >
< td >
< input type = "radio" name = "cursor" value = "vertical-text" >
vertical-text
</ td >
</ tr >
< tr >
< td >
< input type = "radio" name = "cursor" value = "w-resize" >
w-resize
</ td >
< td >
< input type = "radio" name = "cursor" value = "wait" >
wait
</ td >
< td >
< input type = "radio" name = "cursor" value = "zoom-in" >
zoom-in
</ td >
< td >
< input type = "radio" name = "cursor" value = "zoom-out" >
zoom-out
</ td >
</ tr >
</ table >
</ div >
< section >
< label >
< h1 >Output:</ h1 >
</ label >
< div id = "block" style = "padding:10px;border:2px solid red;" >
Hello welcome
</ div >
</ section >
</ body >
</ html >
|
Output: