May 2, 2006
Specify mouse cursors with CSS
| Average rating: Rate this article |
Here are the list of cursor types you can use for the pointing device (usually, mouse). You can test each cursor by moving mouse pointer above the "Example" block:
- auto
-
Initial value. The browser determines the cursor to display based on the current context. (I.e. above the text it will be "text“
cursor, above the hyperlink it will be the
”pointer", and so on.)Example of the auto cursor
- crosshair
- A simple crosshair (e.g., short line segments resembling a "+" sign).
Example of the crosshair cursor
- default
- The platform-dependent default cursor. Often rendered as an arrow.
Example of the default cursor
- pointer
- The cursor is a pointer that indicates a link.
Example of the pointer cursor
- move
- Indicates something is to be moved.
Example of the move cursor
- e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
- Indicate that some edge is to be moved. For example, the
'se-resize' cursor is used when the movement starts from the
south-east corner of the box.
nw-resize n-resize ne-resize w-resize e-resize sw-resize s-resize se-resize - text
- Indicates text that may be selected. Often rendered as an I-bar.
Example of the text cursor
- wait
- Indicates that the program is busy and the user should wait. Often rendered as a watch or hourglass.
Example of the wait cursor
- help
- Help is available for the object under the cursor. Often rendered as a question mark or a balloon.
Example of the help cursor
- url
- The user agent retrieves the cursor from the resource designated by the URI. If the user agent cannot handle
the first cursor of a list of cursors, it should attempt to handle the second, etc. If the user agent cannot handle
any user-defined cursor, it must use the generic cursor at the end of the list.
Example of the (url) cursor
Print this article Bookmark:
Rate This Article
How would you rate the quality of this content? Currently rated: 2.6 out of 5 stars.
3 people have rated this article.
Use your mouse pointer to select as many stars as you want, and press the left mouse button to vote.
Use your mouse pointer to select as many stars as you want, and press the left mouse button to vote.
Other CSS Articles
Rating: 5 stars |
Styling Forms with CSS by WebAssist (Nov 2, 2009) |
| In many ways, forms are the real workhorses of the Web, but that doesn't mean they have to be plain. Until CSS use became prevalent, little could be done to alter the way forms and form elements looked on the Web... | |
Rating: 5 stars |
10 CSS Tips from a Professional CSS Front-End Architect by Ryan Parr (Jul 22, 2009) |
| I have been working with web standards based design for many years now and I see many rookie mistakes. When newbies get started with CSS/XHTML based web design, most of their work is focused on just getting the page to look like the Photoshop comp... | |
Rating: 3 stars |
13 Reasons Why CSS Is Better than Tables by Matt Jurmann (Apr 8, 2008) |
| For the past few days, we've been scouring the web searching for the top 13 reasons why Cascading Style Sheets (CSS) are superior to tables when designing a website. Some web designers swear that tables are better than CSS, while others believe that tables are ancient history and CSS is the only real solution to coding a web site's layout... | |
Rating: 3 stars |
Stylesheets: external vs. embedded (May 2, 2006) |
| There are various ways to use CSS markup in your site pages. You can link external stylesheets to your HTML pages, define CSS elements directly in your HTML code, but what is the best solution? Let's the describe the most popular of them and show their pros and cons... | |
Rating: 3.6 stars |
The Power of CSS by Cliff Ritter (May 2, 2006) |
| CSS or cascading style sheets are used to create a set of styles that can be applied to your fonts, tables and most other attributes of your web page. These styles allow you to create a much cleaner, faster web page that search engines love and also makes life much easier on the designer when global changes to these styles need to be applied... | |
Tips & Tricks
Webmaster Tools
Sponsors
Featured book
Subscribe
Statistics
Validate