CSS Cursor
0 4029
CSS 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
Just 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>
Share:
Comments
Waiting for your comments