Knowledge: CSS Easily controls the cursor used by users when browsing the web

Last Update:2017-02-28 Source: Internet

Author: User

Tags valid

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

css| Cursor | control | Web page

CSS allows you to control all aspects of the page's appearance and layout-including fonts, margin margins, and cursors. Yes, starting with CSS 2.1, you can easily control the cursors that users use when browsing the web.

The standard CSS cursor is the arrow-like, generally speaking, it can meet the needs of a Web page or website, but sometimes you may need to use a different cursor. In these cases, the CSS standard offers a number of options.

CSS Cursor Type

The following table outlines some of the cursor types in the CSS standard.

default cursor : Use standard arrows.
Hand cursor : The cursor is hand-shaped and the index finger sticks out.
pointer-like cursor: Same as hand cursor.
cross-line cursor : Use a cross cursor (a plus sign).
Move cursor : Using a cross cursor, each end of the line is an arrow. This is the same cursor that Windows uses when moving windows.
text cursor : Using the I-shaped cursor (capital letter i).
wait cursor : The cursor is hourglass-like.
Help cursor : Use the question mark cursor.
e-resize: The standard defines this cursor as an arrow pointing to the Orient, but in most browsers the cursor is displayed as a horizontal line with an arrowhead at both ends.
w-resize: The standard defines this cursor as an arrow pointing to the west, but in most browsers the cursor is displayed as a horizontal line with an arrowhead at both ends.
ne-resize: The standard defines this cursor as an arrow pointing to the north-east, but in most browsers, the cursor is a diagonal line with an arrowhead at both ends.
nw-resize: The standard defines this cursor as an arrow pointing to the north West, but in most browsers the cursor is displayed as a diagonal with an arrowhead at both ends.
se-resize: standard defines this cursor as an arrow pointing to the southeast, but in most browsers, the cursor is displayed as a diagonal with an arrowhead at both ends.
s-resize: standard defines this cursor as an arrow pointing to the south or below, but in most browsers the cursor is displayed as a vertical line with an arrowhead at both ends.
sw-resize: The standard defines this cursor as an arrow pointing to the southwest, but in most browsers the cursor is displayed as a diagonal with an arrowhead at both ends.
n-resize: standard defines this cursor as an arrow pointing to the north or above, but in most browsers the cursor is displayed as a vertical line with an arrowhead at both ends.
Progress Cursor : The cursor is hourglass-like.
prohibit cursor : The cursor is a circle with a diagonal line inside it.
cannot drag the cursor: The cursor is hand-shaped and the right side has a forbidden cursor.
vertical Text cursor : The cursor is horizontally I-shaped.
triangle Direction Cursor : The cursor is four arrows and a dot is used in the middle.
Color-Adjusting cursors : Two parallel vertical lines draw a horizontal arrow, just like the cursor in Microsoft Excel that adjusts the size of the column.
row adjustment cursor : Two equal horizontal line draw a vertical arrow, like Microsoft Excel in the resize row cursor.
url (URI): This cursor allows you to use a custom cursor defined in an external file that is submitted as Rui.

We can use the values in the table above, and the cursor properties of an element. The following line of code shows how to use the Style property of an HTML element.

Style= "Cursor:hand;"

As with other CSS properties, you can define a cursor for an entire page or for a single element in the page. List The HTML instance in a uses a different cursor for a variety of page elements.

<title>using the CSS cursor property</title>

<a href= "http://www.webjx.com/" mce_href= "http://www.webjx.com/" style= "Cursor:help"; >WEBJX</a>

</body>

This example adds a cursor to the entire document through the style attribute of the BODY element, but the individual elements in the page also have their own designated cursors, so when the user browses the page, the cursor is converted from the page cursor (from the BODY element) to a single element. List The example in B shows how to determine the style of the cursor based on the class or element type.

<title>using the CSS cursor property</title>

body {cursor:all-scroll;}

. headers

</style>

<body>

<H1 class= "Headers" >title of the Page

<H2 class= "Headers" >Subtitle

<a href= "http://www.webjx.com/" mce_href= "http://www.webjx.com/" >WEBJX</a>

</body>

don't overdo using CSS cursor

Although the previous example is intended to illustrate the use of cursors, it also suggests that using a variety of cursors in a single page can be confusing. Users want the site to run as expected, so they rarely use a preliminary cursor.

Using Help values when a user approaches a Help button or link is a typical example of using the cursor type rather than the default cursor. Although you can use standard values, you can also use a custom cursor.

One important factor in applying the cursor through CSS is that the default pointer is always valid. Browser support started with Netscape 4 and IE 6, but you should still do a thorough test. This is important if you use a cursor value that is not supported by a user's browser. In this case, the page will display the default cursor so that the user experience will not be affected.

through JavaScript Apply CSS Cursor Properties

With JavaScript, you can easily access and apply the cursor properties of an element using the following syntax:

Element.style.cursor= "Cursor_value";

You can use this syntax and various valid events in other JavaScript on the page. List The example in C uses the onfocus event for the last link in the page and the Onselectstart event for the body part of the page (when the user uses the mouse to select a content on the page). When an event is run as defined by JavaScript, some cursors are displayed.

<title>using the CSS cursor property</title>

body {cursor:all-scroll;}

. headers

</style>

<H1 class= "Headers" >title of the Page

<H2 class= "Headers" >Subtitle

<a href= "http://www.webjx.com/" mce_href= "http://www.webjx.com/"

>WEBJX</a>

</body>

More options

CSS provides many options for Web application development. Developers can control page elements through CSS, standard HTML, JavaScript, or a combination of these standards. As the CSS standard defines, the control cursor is just an easy to control option, but you can't use it too much.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More