Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

cursor
hover
element
custom
scroll

How to use the cursor property in CSS

Educative Answers Team

The CSS cursor property allows you to set the type of cursor to show for an element when the mouse pointer hovers over it. You can even use an image, using a URL, as your customized cursor.

Syntax

Here is how you can define a custom cursor for an element ele:

ele {
    cursor: [<url> <x> <y>?,]*, [keyword_value,]; 
}
  • cursor: Cursor property keyword used to set the property for the element.

  • [<url> <x> <y>?,]*: An optional list of URLs. Elements in the list are used as fallback values if the element preceding it does not work. <x> and <y> are optional arguments after each URL which represent the vertical and horizontal offset of the used image from the cursor hotspot.

  • keyword_value: A mandatory list of one or more default inbuilt cursor values. The property falls back on these values if there are no URLs provided or all of them don’t work


Keyword values

The following illustration shows all the default in-built values for the cursor property, compatible across all major browsers.

  • CSS

Cursor image using URL

You may also use a custom image for the cursor, passing it as a URL, as shown below:

  • CSS

RELATED TAGS

cursor
hover
element
custom
scroll
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring