$type=grid$count=4$tbg=rainbow$meta=0$snip=0$rm=0$show=home

Special Cursor Property in CSS

Let us see a practical overview of CSS Cursor Property which we can use to display a different types of cursor when the mouse pointer ...

Let us see a practical overview of CSS Cursor Property which we can use to display a different types of cursor when the mouse pointer hovers on a particular element on a webpage. Usually, pointer cursor  icon,  mover  cursor icon and text cursor icon are mainly used on a webpages and wide number of users are familiar to these. Well however, we can let them experience some different types of cursors that are available in the CSS cursor property.

Here we step forward to the practical example of CSS Cursor Property:

Let us now create an HTML document which has style sheet linked to it so we can add some rules to specify paragraph height and color etc and this is the fun part of CSS.

So, lets begin...

<!DOCTYPE html>
<html>
<head>

<style type="text/css">

P { border : 2px dashed pink;
padding: 20px 10px;
height : 20px;
width : 120px;
float : left;
margin : 10px;
text-align : center;
text-transform : uppercase;
}

p.help-cursor { cursor : help }
p.arrow-cursor { cursor : default }
p.pointer-cursor { cursor : pointer }
p.crosshair-cursor { cursor : crosshair }
p.move-cursor { cursor : move }
p.text-cursor { cursor : text }
p.wait-cursor { cursor : wait }
p.progress-cursor { cursor : progress }
p.n-resize-cursor { cursor : n-resize }
p.ne-resize-cursor { cursor : ne-resize }
p.e-resize-cursor { cursor : e-resize }
p.se-resize-cursor { cursor : se-resize }
p.s-resize-cursor { cursor : s-resize }
p.sw-resize-cursor { cursor : sw-resize }
p.w-resize-cursor { cursor : w-resize }
p.nw-resize-cursor { cursor : nw-resize }

</style>
</head>
<body>

<p class ="help-cursor">Help Cursor </p>
<p class ="arrow-cursor">Arrow Cursor</p>
<p class ="pointer-cursor">Pointer Cursor </p>
<p class ="crosshair-cursor">Crosshair Cursor </p>
<p class ="move-cursor">Move Cursor </p>
<p class ="text-cursor">Text Cursor </p>
<p class ="wait-cursor">Wait Cursor </p>
<p class ="progress-cursor">Progress Cursor </p>
<p class ="n-resize-cursor">N-Resize Cursor </p>
<p class ="ne-resize-cursor">Ne-Resize Cursor </p>
<p class ="e-resize-cursor">E-Resize Cursor </p>
<p class ="se-resize-cursor">Se-Resize Cursor </p>
<p class ="s-resize-cursor">S-Resize Cursor </p>
<p class ="sw-resize-cursor">Sw-Resize Cursor </p>
<p class ="w-resize-cursor">W-Resize Cursor </p>
<p class ="nw-resize-cursor">Nw-Resize Cursor </p>

</body>
</html>

Now, hover your cursor pointer on each box to see the results.

Help

Arrow

Pointer

Crosshair

Move

Text

Wait

Progress

N-Resize

Ne-Resize

E-Resize

Se-Resize

S-Resize

Sw-Resize

W-Resize

Nw-Resize

COMMENTS

Name

css,17,html,7,php,2,python,1,tech,18,
ltr
item
iWriteLess Tech Blog: Special Cursor Property in CSS
Special Cursor Property in CSS
https://3.bp.blogspot.com/-DxzA-BJzX3U/WnoS4NGMvVI/AAAAAAAABoo/3BRAfIH7FqMXKut66nWEBz5-GI_ZoyxeQCLcBGAs/s1600/Cursor_Property_css.png
https://3.bp.blogspot.com/-DxzA-BJzX3U/WnoS4NGMvVI/AAAAAAAABoo/3BRAfIH7FqMXKut66nWEBz5-GI_ZoyxeQCLcBGAs/s72-c/Cursor_Property_css.png
iWriteLess Tech Blog
http://www.iwriteless.com/2016/04/special-cursor-property-in-css.html
http://www.iwriteless.com/
http://www.iwriteless.com/
http://www.iwriteless.com/2016/04/special-cursor-property-in-css.html
true
2724151228810149585
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy