CSS changes the webpage mouse pointer and specifies the element pointer (1) -- code section, css mouse pointer

CSS changes the webpage mouse pointer and specifies the element pointer (1) -- code section, css mouse pointer

To Implement CSS to change the webpage mouse pointer and the specified Element pointer, we should first understand the following:

All mainstream browsers support the cursor attribute.
Note: Opera 9.3 and Safari 3 are not supported.UrlValue.
Note: Internet Explorer (including IE8) of any version does not support attribute values "inherit ".
Definition and usage
The cursor attribute specifies the type (SHAPE) of the cursor to be displayed ).
This attribute defines the shape of the cursor used when the mouse pointer is placed within the boundary of an element (but CSS2.1 does not define which boundary determines the range ).
 
 

  
  
 
   
 
    
Default Value:
 
    
Auto
 
   
 
   
 
    
Inheritance:
 
    
Yes
 
   
 
   
 
    
Version:
 
    
CSS2
 
   
 
   
 
    
JavaScript Syntax:
 
    
Object. Style. cursor = "crosshair" (we can see that js can also change the pointer, but it is more convenient to select css)
 
   
 
  
 
 
Possible Value
 
 

  
  
 
   
 
    
Value
 
    
Description
 
   
 
   
 
    
Url
 
    
The URL of the custom optical indicator to be used.
Note: always define a normal cursor at the end of this list to prevent any available cursor defined by the URL.
 
   
 
   
 
    
Default
 
    
Default cursor (usually an arrow)
 
   
 
   
 
    
Auto
 
    
Default value. The cursor set by the browser.
 
   
 
   
 
    
Crosshair
 
    
The cursor is displayed as a cross line.
 
   
 
   
 
    
Pointer
 
    
The cursor is a pointer indicating the Link (one hand)
 
   
 
   
 
    
Move
 
    
This cursor indicates that an object can be moved.
 
   
 
   
 
    
E-resize
 
    
This cursor indicates that the edge of the rectangle can be moved to the right (East.
 
   
 
   
 
    
Ne-resize
 
    
This cursor indicates that the edge of the rectangle box can be moved up and right (North/East ).
 
   
 
   
 
    
Nw-resize
 
    
This cursor indicates that the edge of the rectangle can be moved up and left (North/West ).
 
   
 
   
 
    
N-resize
 
    
This cursor indicates that the edge of the rectangle box can be moved up (North.
 
   
 
   
 
    
Se-resize
 
    
This cursor indicates that the edge of the rectangle box can be moved down and to the right (South/East ).
 
   
 
   
 
    
Sw-resize
 
    
This cursor indicates that the edge of the rectangle can be moved down and left (South/West ).
 
   
 
   
 
    
S-resize
 
    
This cursor indicates that the edge of the rectangle can be moved down (South ).
 
   
 
   
 
    
W-resize
 
    
This cursor indicates that the edge of the rectangle can be moved to the left (West ).
 
   
 
   
 
    
Text
 
    
This cursor indicates the text.
 
   
 
   
 
    
Wait
 
    
This cursor indicates that the program is busy (usually a table or hourglass ).
 
   
 
   
 
    
Help
 
    
This cursor indicates available help (usually a question mark or a balloon ).
 
   
 
  
 
 

The above content comes from w3c, which is already very detailed. But in practice, the bloggers have summarized the following points:

1.css Syntax:

Element {
// The element can be replaced with all possible elements to change the pointer cursor: kind of the specified element;
// Kind can be replaced with all values (except url) in the "possible values" table above}

2. cursor url value → implement custom styles

1 body {2 cursor: url ("any supported. ico,. ani,. cur, or other image addresses"), auto; 3}

", Auto" is necessary to prevent the url address from being unavailable. If you lose this parameter, it will lead to bugs not found.

OK. This code can change the pointer of a webpage.

3. More realistic pointers

1 a: hover {2 cursor: url ("any supported. ico,. ani,. cur, or other image addresses should be different from above"), auto; 3}

This will change the pointer when the mouse points to the connection, closer to the same in the operating system.

Simple? Try it! In my next blog, I will teach you how to draw your own pointers, but it will take some time. If you want to learn it, follow me!

Degrees (degrees ° degrees) Then degrees

Enjoy yourself alone-watch your life in the wind, snow, and moon. If you like this blog, just like it or click the share button on the right to share it! It's good to comment./helpless.