CSS Cursor Hand


Click Here And Get This Posted To YOU In PDF Format

CSS Cursor Hand

Introduction on CSS Cursor Hand

While designing pages in HTML, you might want to change the style of the mouse cursor according to the context. For example, when the page is loading cursor sign will be of one type, when the help section hovers, the cursor will change again, etc. To implement this, cursor properties allow indicating which type of cursors should be shown to the user according to the required scenarios like “wait”, “help”, “move” etc. in your HTML code. In this article, we will see how we can use the design of different types of cursors in some examples.

Syntax:

cursor: value;

Now the question is what are the different values? Those are basically different types of cursors. For this refer to the below table of values where various cursor types are described.

Value
Description

alias
Denotes the creation of alias

all-scroll
Denotes scrolling in any direction

auto
Default cursor as set in the browser

cell
Denotes when a cell is selected

context-menu
Denotes when the contextual menu is readily available

col-resize
Denotes column size can be resized in a horizontal fashion

copy
Denotes copy action of something

crosshair
Crosshair symbol is indicated

default
This is by default came

e-resize
Denotes you can move or resize to east or right

ew-resize
Denotes you can move to both east and west directions

grab
Denotes you can grab something

grabbing
Denotes you can grab something

help
Denotes help section

move
Denotes movement

n-resize
Denotes you can move to both north direction

ne-resize
Denotes you can move to both north and east directions

nesw-resize
Denotes you can move to both north-east and south-west directions

ns-resize
Denotes you can move to both north and south directions

nw-resize
Denotes you can move to both north and west directions

nwse-resize
Indicates a bidirectional resize cursor

no-drop
Denotes that you cannot drop anything here.

none
Denotes that cursor is not available for this area

not-allowed
Denotes forbidden action

pointer
Denotes pointer to a link

progress
Denotes progressiveness or advancement

row-resize
Denotes possibility of vertical resize of row.

s-resize
Denotes you can move to both south direction

se-resize
Denotes you can move to both south and east directions

sw-resize
Denotes you can move to both south and east directions

text
Denotes the possibility of selection of text

URL
Denotes comma-separated URLs

vertical-text
Denotes the possibility of selection of text vertically

w-resize
Denotes you can move to both west direction

wait
Denotes business of program

zoom-in
Denotes zoom in is a possibility here

zoom-out
Denotes zoom out is a possibility here

How Cursor Hand is Done in CSS?

You just need to mention the required cursor as per the syntax in your HTML code to get that cursor in output. That is it!! You can refer to the example section with code to see how to implement cursor styles.

Examples

Let’s look at a few examples to understand this well.

Example #1 –  Wait Cursor

In this example, we will see how the “wait” cursor is being implemented in our HTML code with the help of CSS. In the output, you can see the cursor picture to get better understanding and visibility.

Code:

<html>
<head>
</head>
<body>
<div style=”cursor:wait”>Please wait while excel is opening</div>
</body>
</html>

Output:

CSS Cursor Hand Example 1

Example #2 – Help Cursor

In this example, we will see how the “help” cursor is being implemented in our HTML code with the help of CSS. In the output, you can see the cursor picture to get better understanding and visibility.

Code:

<html>
<head>
</head>
<body>
<div style=”cursor:help”>Kindly refer this section for more help</div>
</body>
</html>

Output:

CSS Cursor Hand Example 2

Example #3 – Crosshair Cursor

In this example, we will see how the “crosshair” cursor is being implemented in our HTML code with the help of CSS. In the output, you can see the cursor picture to get better understanding and visibility.

Code:

<html>
<head>
</head>
<body>
<div style=”cursor:crosshair”>Love to play shooting game?</div>
</body>
</html>

Output:

CSS Cursor Hand Example 3

In the next three examples, we will list almost all possible types of cursors in three different sections. When you run the code, just hover the mouse onto different names of cursors to see their pictures.

Example #4 – List 1

Code:

<!DOCTYPE html>
<html>
<head>
<style>
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: -webkit-grab; cursor: grab;}
.grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
</style>
</head>
<body>
<h1> These are various types of cursors: List 1 </h1>
<div>Hover the mouse pointer the cursor names to see the cursor </div>
<div class=”alias”>alias</div>
<div class=”all-scroll”>all-scroll</div>
<div class=”auto”>auto</div>
<div class=”cell”>cell</div>
<div class=”context-menu”>context-menu</div>
<div class=”col-resize”>col-resize</div>
<div class=”copy”>copy</div>
<div class=”crosshair”>crosshair</div>
<div class=”default”>default</div>
<div class=”e-resize”>e-resize</div>
<div class=”ew-resize”>ew-resize</div>
<div class=”grab”>grab</div>
<div class=”grabbing”>grabbing</div>
</body>
</html>

Output:

CSS Cursor Hand Example 4

Example #5 – List 2

Code:

<!DOCTYPE html>
<html>
<head>
<style>
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
</style>
</head>
<body>
<h1> These are various types of cursors: list 2 </h1>
<div> Hover the mouse pointer the cursor names to see the cursor </div>
<div class=”help”>help</div>
<div class=”move”>move</div>
<div class=”n-resize”>n-resize</div>
<div class=”ne-resize”>ne-resize</div>
<div class=”nesw-resize”>nesw-resize</div>
<div class=”ns-resize”>ns-resize</div>
<div class=”nw-resize”>nw-resize</div>
<div class=”nwse-resize”>nwse-resize</div>
<div class=”no-drop”>no-drop</div>
<div class=”none”>none</div>
<div class=”not-allowed”>not-allowed</div>
<div class=”pointer”>pointer</div>
<div class=”progress”>progress</div>
</body>
</html>

Output:

List 2 Example 5

Example #6 – List 3

Code:

<!DOCTYPE html>
<html>
<head>
<style>
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}
</style>
</head>
<body>
<h1>These are various types of cursors: List 3 </h1>
<div> Hover the mouse pointer the cursor names to see the cursor </div>
<div class=”row-resize”>row-resize</div>
<div class=”s-resize”>s-resize</div>
<div class=”se-resize”>se-resize</div>
<div class=”sw-resize”>sw-resize</div>
<div class=”text”>text</div>
<div class=”url”>url</div>
<div class=”w-resize”>w-resize</div>
<div class=”wait”>wait</div>
<div class=”zoom-in”>zoom-in</div>
<div class=”zoom-out”>zoom-out</div>
</body>
</html>

Output:

List 3 Example 6

Conclusion – CSS Cursor Hand

This concludes our learning of the topic “CSS Cursor Hand”. As you can see how we had implemented different cursors in our HTML code examples by CSS. Learning of codes will be incomplete if you will not write code by yourself.

Recommended Articles

This is a guide to CSS Cursor Hand. Here we discuss a brief overview on CSS Cursor Hand and its different examples along with its code implementation. You can also go through our other suggested articles to learn more –

Uses of CSS in Technology
Tips and Tricks to use CSS Commands
Introduction to Top 6 Advantages of CSS
Guide to Top 10 CSS Interview Questions

The post CSS Cursor Hand appeared first on EDUCBA.

Read more: educba.com

What's Your Reaction?

Cry Cry
0
Cry
Cute Cute
0
Cute
Damn Damn
0
Damn
Dislike Dislike
0
Dislike
Like Like
0
Like
Lol Lol
0
Lol
Love Love
0
Love
Win Win
0
Win
WTF WTF
0
WTF

Comments 0

Your email address will not be published. Required fields are marked *

CSS Cursor Hand

log in

Become a part of our community!

Captcha!
Don't have an account?
sign up

reset password

Back to
log in

sign up

Join BoomBox Community

Captcha!
Back to
log in
Choose A Format
Personality quiz
Trivia quiz
Poll
Story
List
Open List
Ranked List
Meme
Video
Audio
Image