How to change mouse shape in html

htmlHow to change the shape of the mouse: 1. Use the cursor attribute of CSS to change the shape of the mouse pointer, code such as ".a{ cursor:hand }"; 2. Use third-party controls to change the shape of the mouse pointer.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

CSS/HTML Change the shape of the mouse pointer

There are two ways to change the shape of the mouse pointer; the first one: use the css cursor attribute to change the shape of the mouse pointer. The other is: using third-party controls, and the one I use most often is the first: using css style sheet to change the mouse pointer shape

Let's look at the first one first: use the cursor attribute to change the mouse pointer shape.

Sometimes we don’t need text or pictures to add links, and we also want the mouse style when adding links. This uses our css style sheet to mouse pointer shape. Please set some properties of the following css mouse pointercss style sheet:

##Hand shapepointer, hand (hand is exclusive to IE)Mobile objectmoveNot allowednot-allowedCannot releaseno-dropwait/hourglasswaitHelphelpcrosshaircrosshairResize upward (North)n-resize Change size downward (South)s_resize has the same effect as n-resizeResize to the left (West)w-resizeChange size to the right (East)e-resize has the same effect as w-resizeTo the upper left Change size (NorthWest)nw-resizeChange size to left and down (SouthWest)sw-resizeResize to the upper right (NorthEast) ne-resize Same effect as sw-resizeChange size to the right and down (SouthEast)se-resize and nw- The effect of resize is the sameCustom cursor

The above is the css style sheet that changes the mouse pointer shape. How to apply it? Let's use an example to illustrate:

<style type="text/css">   
.a{ cursor:hand }   /*这里边的curusor的值可以是以上表中的任何值,或是你自己定义*/</style>
<p class=”a”>欢迎您到XXX来做客</p>

You can also write the style sheet directly in the p tag, and the effect is the same. For example:

<p style=”cursor:help;”>欢迎您到XXX来做客</p>

There is another way of using it. The principle is: use A cursor attribute of CSS2, cursor: url (url), mouse files can use various file formats such as jpg, gif, ani and cur. It should be noted that this method can only be displayed normally in IE5.5 or above browsers.

[Recommended learning: HTML video tutorial]

The second method to change the shape of the mouse pointer: the method of using third-party controls

This The method is very simple. You only need to add the following code to the 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 of the web page file:

<script language=>var Loaded=false;var Flag=false;</script>
<script src=&#39;http://files.cometsystems.com//lc2000.js&#39;
language=></script>
<script language=>if(Loaded&&Flag)TheCometCursor(&#39;cd_electric&#39;,0,626);</script>

After modification, the browser will pop up a " Security Settings Warning", click "Yes", the system automatically installs the control, and the mouse can be displayed according to your needs.
So, how to choose the mouse style you need? First log on to the website http://www.cometzone.com. This website has more than 4,000 types of mice in 14 major categories. The content is very extensive, and the mouse files are also beautifully produced. You can select the mouse you need from the categories according to your needs and click on the corresponding mouse. You can preview different effects by clicking on the mouse picture.
After selecting the mouse, click the "GET CURSOR CODE" link in the left navigation of the web page, go to the next page, and then click the "Select Code" button. The content in the multi-line text box under the button is the code I provided above. Only the TheCometCursor('cd_electric',0,626) part of the code is different, and the displayed mouse status is also different.

Default	default
Text/Edit	text
Auto	##auto
##url('cursor address')

The above is the detailed content of How to change mouse shape in html. For more information, please follow other related articles on the PHP Chinese website!