CSS Cursor Tutorial | Coding Tag
×

CSS Cursor

0 2048

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:


Discount Coupons



Leave a Reply


Comments
    Waiting for your comments