When laying out a page , CSS is an indispensable part of the work. I often hear people say: HTML is what a person looks like without makeup, and adding CSS is what a person looks like after putting on makeup. This sentence is easy to understand and explains the relationship between CSS and HTML very well.
There are many properties in CSS. This article mainly explains the CSS mouse style, that is, the CSS cursor property, and its many optional values. For example, the cursor hand shape uses the cursor:pointer property.
1. Basic syntax of CSS cursor
What is the cursor attribute: It refers to the cursor shape that appears when the mouse pointer is placed within the boundary of an element. It includes question marks, small hands and other shapes.
When using it, you can insert style=cursor: a certain attribute value into any tag you want to add, or you can add it in the CSS style.
for example:
pointer, small hand shape
help, help shape.
There are more than a dozen optional values for the cursor's attribute values . Just choose the appropriate value according to your needs during work.
2. CSS cursor attribute value
Tip: Due to different computer systems, there will be certain differences in mouse styles.
Example:
<!DOCTYPEhtml><html><head><style>div{height:30px;border:1pxsolidgreen;margin-top:10px;}.cell{cursor:cell;}.crosshair{cursor:crosshair;}.text{cursor :text ;}.vertical-text{cursor:vertical-text;}.alias{cursor:alias;}.copy{cursor:copy;}.move{cursor:move;}.no-drop{cursor:no-drop;} </style></head><body><divclass =cell>cursor:cell;</div><divclass=crosshair>cursor:crosshair;</div><divclass=text>cursor:text;</div><divclass=vertical-text>cursor:vertical-text; </div>< divclass=alias>cursor:alias;</div><divclass=copy>cursor:copy;</div><divclass=move>cursor:move;</div><divclass=no-drop>cursor:no-drop ;</div></body></html>You can run it and see, it is very intuitive.