Summary of CSS-cursor properties and usage

The cursor attribute specifies the type (shape) of the cursor to be displayed. This property defines the cursor shape used when the mouse pointer is placed within the bounds of an element (although CSS2.1 does not define which bounds determine this range).

When we layout DIV CSS, we will encounter the control of the mouse pointer cursor within the object, such as the mouse passing through the pointer and changing into a finger shape. Next, we introduce the mouse pointer style cursor control. In addition to the system default mouse pointer style, you can set the image as the mouse pointer through CSS. It is common for some websites to have various small image styles for the mouse pointer. Of course, this is to set the mouse style through css cursor.

1.CSS-cursor attribute

The cursor attribute specifies the type (shape) of the cursor to be displayed

2.Detailed explanation of css cursor url usage format

css cursor url usage format: css:{cursor:url('icon path'),auto;} //IE,FF,chrome All browsers can

Example code:

html{cursor: url("ued.taobao.com/blog/wp-content/themes/taobaoued/images/cursor.ico"),auto;}

Analysis: The previous url is a custom mouse icon path, and the second parameter auto is the css standard cursor style, which can be replaced by other attributes ( Such as pointer/default, etc.)!

3.cursor mouse style?

auto: normal mouse

crosshair: crosshair mouse

default: default mouse

pointer: point mouse (hand, two are written to take care of IE5, which only recognizes hand.)

move: move the mouse

4.About cursor settings Image issues

Several things to note: 1. The image address is an absolute path, 2. The image size is best 32*32, anyway, the size parsed under each browser is different.

5.css cursor mouse shape

url The URL of the custom cursor to be used.

Note: Always define a normal cursor at the end of this list in case there is no available cursor defined by URL.

default Default cursor (usually an arrow)

auto Default. The cursor set by the browser.

crosshair The cursor appears as a crosshair.

pointer The cursor appears as a pointer (a hand) indicating a link.

move This cursor indicates that an object can be moved.

6.Detailed explanation of the example code of cursor attribute in CSS

cursor attribute of CSS

Today I learned the cursor attribute of CSS. This is my first blog Let's sum it up.

The cursor attribute is used to control the display style of the cursor. The possible values are as follows:

cursor:url()*| {auto|default|pointer|crosshair|text|vertical-text|help|not-allowed|no-drop|move|e-reszie|s-resize|w-resize|w-resize|n-resize|all-scroll|ne-resize|se-resize|nw-resize|sw-resize|col-resize|row-resize|}

* means writing at least one of this value, and you can select a value in {} after the url.

Related questions and answers:

1.javascript - After binding the window.resize event to an element, the cursor attribute set previously Failed.

2.vim - Mapping in visual mode to achieve cursor switching between split windows?

[Related recommendations 】

1.php.cn Dugu Jiujian (2) - css video tutorial

2.Position the mouse focus to the end of the text box

The above is the detailed content of Summary of CSS-cursor properties and usage. For more information, please follow other related articles on the PHP Chinese website!