Open In App

How to set different type of cursors using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to set different types of cursors using CSS. The cursor CSS is used to specify the kind of mouse cursor when the mouse pointer is over an element. By using it, we may choose the type of cursor that the user will see. here we use the cursor property.

The cursor property is used to set different types of cursors using CSS. With the help of the cursor property, we can specify the mouse cursor to be displayed while pointing to an element. It takes a value which is the type of cursor.

Syntax:

cursor: value

Example 1: In this example, we are using the above-explained method.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            color: green;
            cursor: all-scroll;
            border: solid 2px red;
            margin: 10% 30%;
            width: 30%;
        }
    </style>
</head>
 
<body>
    <div class="gfg">
        <h1>GeeksforGeeks</h1>
        <p>
            Mouse over the div to change
            the mouse cursor.
        </p>
 
    </div>
</body>
</html>


Output:

Example 2: Here is another example of using the cursor property.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        div{
            color: green;
            cursor: zoom-in;
            border: solid 2px red;
            margin: 10% 30%;
            width: 30%;
        }
    </style>
</head>
 
<body>
    <div class="gfg">
        <h1>GeeksforGeeks</h1>
        <p>
            Mouse over the div to change
            the mouse cursor.
        </p>
 
    </div>
</body>
 
</html>


Output:



Last Updated : 24 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads