How to Customize your Cursor with CSS Code
Cascading Style Sheets (CSS) is a powerful Web development technology that you can use to customize the mouse cursor for your MySpace, Xanga or Friendster page or your website. It is used to control the style and presentation of a website, particularly to define the font, color, layout and other features of a site. CSS is an invaluable time-saver, as it allows you to determine these features in one single style sheet, rather than having to create HTML code for every instance that it is required. You can also use CSS to create and customize your mouse cursor icon by simply inputting the proper CSS code into your HTML field. With CSS, you can create a wide range of effects, as the cursor is modified based on the particular conditions defined by the code.
- Difficulty:
- Moderate
Instructions
-
-
1
Use the following codes to display the desired cursor effects in the html code described in the steps that follow:{cursor:default}: Regular mouse cursor{cursor:wait}: Hourglass or other icon to show the PC "thinking"{cursor:crosshair}: displays a cross-hair icon{cursor:text}: displays an "I" shaped icon when text is being selected{cursor:pointer}: Displays a pointing hand icon{cursor:help}: Help (Usually displays a question mark){cursor:hand}: Hand{cursor:move}: Move{cursor:n-resize}: Resize north{cursor:ne-resize}: Resize northeast{cursor:e-resize}: Resize east{cursor:se-resize}: Resize southeast{cursor:s-resize}: Resize south{cursor:sw-resize}: Resize southwest{cursor:w-resize}: Resize west{cursor:nw-resize}: Resize northwest{cursor:not allowed}: Not allowed{cursor:all-scroll}: All-scroll
-
2
Use this html code to change the style of your cursor when it hovers over a link. Replace "value" with the desired cursor effect from Step 1:<head><style type="text/css"><!--a:hover {cursor:value}--></style></head>
-
3
Change the cursor style for the entire page with the code below. Replace "value" with the desired cursor effect from Step 1:<html><head><style type="text/css">body {cursor:value}</style></head>
-
4
Change the cursor style for a particular section of the page with the code below. Replace "value" with the desired cursor effect from Step 1:<html><head><style type="text/css">.xlink A{cursor:value}.hlink A{cursor:value}</style></head>
-
5
Hover or mouse-over a link to see what your mouse cursor will change to.
-
1
Tips & Warnings
CSS coding is supported by Internet Explorer 4 and higher, and Netscape Navigator 6 and greater.
Keep in mind that some people are irritated when they browse a Web page that has the mouse cursor changing too often.
