Css on hover cursor pointer

cursor

The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.

The cursor setting should inform users of the mouse operations that can be performed at the current location, including: text selection, activating help or context menus, copying content, resizing tables, and so on. You can specify either the type of cursor using a keyword, or load a specific icon to use (with optional fallback images and mandatory keyword as a final fallback).

Try it

Syntax

/* Keyword value */ cursor: auto; cursor: pointer; /* … */ cursor: zoom-out; /* URL with mandatory keyword fallback */ cursor: url(hand.cur), pointer; /* URL and coordinates, with mandatory keyword fallback */ cursor: url(cursor_1.png) 4 12, auto; cursor: url(cursor_2.png) 2 2, pointer; /* URLs and fallback URLs (some with coordinates), with mandatory keyword fallback */ cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), /* … ,*/ url(cursor_n.cur) 5 5, progress; /* Global values */ cursor: inherit; cursor: initial; cursor: revert; cursor: revert-layer; cursor: unset; 

The cursor property is specified as zero or more values, separated by commas, followed by a single mandatory keyword value. Each should point to an image file. The browser will try to load the first image specified, falling back to the next if it can’t, and falling back to the keyword value if no images could be loaded (or if none were specified).

Each may be optionally followed by a pair of space-separated numbers, which set the and coordinates of the cursor’s hotspot relative to the top-left corner of the image.

Values

A url() or a comma separated list url(), url(), … , pointing to an image file. More than one url() may be provided as fallbacks, in case some cursor image types are not supported. A non-URL fallback (one or more of the keyword values) must be at the end of the fallback list.

Optional x- and y-coordinates indicating the cursor hotspot; the precise position within the cursor that is being pointed to.

The numbers are in units of image pixels. They are relative to the top left corner of the image, which corresponds to » 0 0 «, and are clamped within the boundaries of the cursor image. If these values are not specified, they may be read from the file itself, and will otherwise default to the top-left corner of the image.

A keyword value must be specified, indicating either the type of cursor to use, or the fallback cursor to use if all specified icons fail to load.

The available keywords are listed in the table below. Other than none , which means no cursor, there is an image showing how the cursors used to be rendered. You can hover your mouse over the table rows to see the effect of the different cursor keyword values on your browser today.

Something can be zoomed (magnified) in or out.

Formal definition

Formal syntax

cursor =
[ [ | ] [ ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]

=
url( * ) |
src( * )

Usage notes

Icon size limits

While the specification does not limit the cursor image size, user agents commonly restrict them to avoid potential misuse. For example, on Firefox and Chromium cursor images are restricted to 128×128 pixels by default, but it is recommended to limit the cursor image size to 32×32 pixels. Cursor changes using images that are larger than the user-agent maximum supported size will generally just be ignored.

Supported image file formats

User agents are required by the specification to support PNG files, SVG v1.1 files in secure static mode that contain a natural size, and any other non-animated image file formats that they support for images in other properties. Desktop browsers also broadly support the .cur file format.

The specification further indicates that user agents should also support SVG v1.1 files in secure animated mode that contain a natural size, along with any other animated images file formats they support for images in other properties. User agents may support both static and animated SVG images that do not contain a natural size.

iPadOS

iPadOS supports pointer devices like trackpads and mouses. By default, the iPad cursor is displayed as a circle, and the only supported value that will change an appearance of the pointer is text .

Other notes

Cursor changes that intersect toolbar areas are commonly blocked to avoid spoofing.

Examples

Setting cursor types

.foo  cursor: crosshair; > .bar  cursor: zoom-in; > /* A fallback keyword value is required when using a URL */ .baz  cursor: url("hyper.cur"), auto; > 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

How to Use CSS to Change Cursor to Hand Pointer on Hover

Learn how to improve user experience by changing the cursor to a hand pointer on hover using CSS. Follow our guide to customize your cursor and adhere to best practices.

• Understanding the CSS cursor property
• Using the :hover selector to change cursor on hover
• How to Change Mouse Pointer on Hover in CSS
• Customizing the cursor using CSS
• Pointer-events CSS property and the .pe-none class
• Best practices and tips for using the pointer cursor on hover
• Other code samples for changing cursor to a hand pointer on hover using CSS
• Conclusion
• How do I make my cursor pointer hover in CSS?
• How do I change my cursor to pointer on hover?
• How do I turn off the cursor pointer in CSS?
• How do I add a custom mouse cursor in CSS?

As a website developer, you might have encountered situations where you need to create clickable elements on a page. One way to improve user experience and indicate clickable elements is by changing the cursor to a hand pointer on hover. This post will guide you through how to use CSS to change the cursor to a hand pointer on hover.

Understanding the CSS cursor property

The CSS cursor property controls the type of cursor displayed when hovering over an element. The pointer value displays a hand pointer cursor. Other cursor values include default , text , wait , and move . Here is an example of how to use the cursor property with different values:

/* default cursor */ .element < cursor: default; >/* text cursor */ .element < cursor: text; >/* wait cursor */ .element < cursor: wait; >/* move cursor */ .element

Using the :hover selector to change cursor on hover

The :hover selector allows you to apply styles to an element when the cursor hovers over it. Use the cursor property with the pointer value inside the :hover selector to display a hand pointer when hovering over an element. Here is an example of how to use the :hover selector with the cursor property:

How to Change Mouse Pointer on Hover in CSS

How to easily change your mouse pointer when you hover over an element using CSS.There Duration: 8:12

Customizing the cursor using CSS

The latest advancement in CSS cursor is the ability to use custom images as mouse cursors. This is achieved using the url function along with the cursor property. Here is an example of how to use a custom image as a cursor:

Pointer-events CSS property and the .pe-none class

The pointer-events CSS property controls how an element responds to pointer events. By default, an element responds to pointer events. However, you can set the pointer-events property to none to prevent interactions with a pointer. This is achieved using the .pe-none class. Here is an example of how to use the pointer-events property and the .pe-none class:

/* enable pointer events */ .element < pointer-events: auto; >/* disable pointer events */ .element.pe-none

Best practices and tips for using the pointer cursor on hover

To ensure proper usage of the pointer cursor on hover, here are some best practices and tips to follow:

• Only use the pointer cursor on clickable elements.
• Avoid using the pointer cursor on non-clickable elements, such as text.
• Use descriptive cursor styles, such as “help” or “wait”, to indicate the purpose of an element.

Other code samples for changing cursor to a hand pointer on hover using CSS

In Css , for example, css cursor pointer hover code sample

In Css case in point, onhover mouse pointer css code example

In Css as proof, css cursor pointer code example

cursor: pointer; /* Mouse image is a hand */

In Html as proof, how to change mouse pointer into cursor icon when you hover code example

In Css case in point, cursor hover to change color and become pointer code example

In Css , for example, css hover pointer

In Css case in point, css cursor pointer code example

Conclusion

Changing the cursor to a hand pointer on hover can improve user experience and indicate clickable elements. The CSS cursor property with the pointer value and the :hover selector can be used to achieve this effect. Custom images and the pointer-events CSS property can also be used to customize the cursor. By adhering to best practices and tips, you can ensure proper usage of the pointer cursor on hover.

Frequently Asked Questions — FAQs

How does changing the cursor to a hand pointer on hover improve user experience?

Changing the cursor to a hand pointer on hover indicates clickable elements and makes it easier for users to interact with your website.

What is the pointer value in CSS cursor property?

Can I use custom images as cursors in CSS?

Yes, the latest advancement in CSS cursor allows the use of custom images as mouse cursors. We provide code examples in our guide.

How do I use the pointer-events property to control how an element responds to pointer events?

The pointer-events property can be set to «none» using the .pe-none class, which prevents interactions with a pointer. We explain how to use this property in our guide.

Should I use the pointer cursor on non-clickable elements?

What are some descriptive cursor styles that I can use in CSS?

Descriptive cursor styles, such as «help» or «wait», can be used to indicate the purpose of an element. We provide tips and best practices for using the pointer cursor on hover in our guide.

Источник