CSS Cursor

Cursor  specifies the type of cursor to be displayed when the pointer is placed or hover element.

Example:

<!DOCTYPE html>
<html>
<head>
<style>

div {
width:200px;
height200px;
cursor:move;
}
</style>
</head>

<body>
<div> </div>
</body>
</html>

Cursor types are given below: you can copy and paste the cursor type and see the

result
alias
all-scroll
auto
cell
context-menu
col-resize
copy
crosshair
default
e-resize
ew-resize
grab
grabbing
help
move
n-resize
ne-resize
nesw-resize
ns-resize
nw-resize
nwse-resize
no-drop
none
not-allowed
pointer
progress
row-resize
s-resize
se-resize
sw-resize
text
url(smiley.gif),
vertical-text
w-resize
wait
zoom-in
zoom-out
initial




<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Cursor Points </title>
<style type="text/css">
.cursor{ cursor:crosshair; color:#990000}
.cursor1{ cursor:e-resize; color:#666666;}
.cursor2{ cursor:help; color:#0066FF;}
.cursor3{ cursor:inherit; color:#009900;}
.cursor4{ cursor:move; color:#999933;}
.cursor5{ cursor:ne-resize; color:#9900CC;}
.cursor6{ cursor:n-resize; color:#336666;}
.cursor7{ cursor:pointer; color:#FF3333;}
.cursor8{ cursor:nw-resize; color:#FF00CC;}
.cursor9{ cursor:se-resize; color:#666633;}
.cursor10{ cursor:s-resize; color:#66CC66;}
.cursor11{ cursor:sw-resize; color:#00CC99;}
.cursor12{ cursor:text; color:#660000;}
.cursor13{ cursor:wait; color:#999999;}
.cursor14{ cursor:w-resize; color: #FF9999}
</style>

</head>
<body>
<p class="cursor"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quam urna, ullamcorper in eros quis, blandit pharetra neque. </p>
<p class="cursor1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quam urna, ullamcorper in eros quis, blandit pharetra neque. </p>
<p class="cursor2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quam urna, ullamcorper in eros quis, blandit pharetra neque. </p>
<p class="cursor3"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quam urna, ullamcorper in eros quis, blandit pharetra neque. </p>
<p class="cursor4"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quam urna, ullamcorper in eros quis, blandit pharetra neque. </p>
<p class="cursor5"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quam urna, ullamcorper in eros quis, blandit pharetra neque. </p>
<p class="cursor6"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quam urna, ullamcorper in eros quis, blandit pharetra neque. </p>
<p class="cursor7"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quam urna, ullamcorper in eros quis, blandit pharetra neque. </p>
<p class="cursor8"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quam urna, ullamcorper in eros quis, blandit pharetra neque. </p>
<p class="cursor9"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quam urna, ullamcorper in eros quis, blandit pharetra neque. </p>
<p class="cursor10"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quam urna, ullamcorper in eros quis, blandit pharetra neque. </p>
<p class="cursor11"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quam urna, ullamcorper in eros quis, blandit pharetra neque. </p>
<p class="cursor12"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quam urna, ullamcorper in eros quis, blandit pharetra neque. </p>
<p class="cursor13"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quam urna, ullamcorper in eros quis, blandit pharetra neque. </p>
<p class="cursor14"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quam urna, ullamcorper in eros quis, blandit pharetra neque. </p>

</body>
</html>

Leave a Reply

avatar
  Subscribe  
Notify of