How to change mouse shape in html

藏色散人
Release: 2021-04-13 14:39:33
Original
4587 people have browsed it

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.

How to change mouse shape in html

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: usingcss style sheetto change themouse pointershape

Let's look at the first one first: use the cursor attribute to change themouse pointershape.

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

The above is thecss style sheetthat changes themouse pointershape. How to apply it? Let's use an example to illustrate:

 

欢迎您到XXX来做客

Copy after login

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

欢迎您到XXX来做客

Copy after login

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


  
Copy after login

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.

##Hand shape pointer, hand (hand is exclusive to IE) Mobile object move Not allowed not-allowed Cannot release no-drop wait/hourglass wait Help help crosshair crosshair Resize upward (North) n-resize Change size downward (South) s_resize has the same effect as n-resize Resize to the left (West) w-resize Change size to the right (East) e-resize has the same effect as w-resize To the upper left Change size (NorthWest) nw-resize Change size to left and down (SouthWest) sw-resize Resize to the upper right (NorthEast) ne-resize Same effect as sw-resize Change size to the right and down (SouthEast) se-resize and nw- The effect of resize is the same Custom cursor
of the web page file:

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!