Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Set The Cursor Style

With CSS you can define the type of cursor that you want to display over different elements of your web page or during different processes performed by your program. The simplest way to demonstrate this is by setting the type of cursor that will display when your mouse pointer enters a specific html element. You can try this with the code shown below.

<span style="cursor:crosshair; border-style:solid;">crosshair</span>

If you set the cursor value to auto you will be letting the browser set the cursor as usual. Setting the cursor to default sets the default cursor, typically an arrow. Setting the cursor to none prevents any cursor from displaying. As you move your mouse pointer over each box shown below, the indicated cursor will appear.

crosshair pointer n-resize ns-resize
move grab ne-resize nesw-resize
all-scroll grabbing e-resize ew-resize
help wait se-resize nwse-resize
alias progress s-resize zoom-in
copy cell sw-resize zoom-out
text col-resize w-resize no-drop
vertical-text row-resize nw-resize not-allowed

Depending upon your browser, some cursors may be duplicated. Although there are certain expectations as to which cursor will appear during different operations, different browsers sometimes don't follow the customs. When you design your own applications, to avoid confusion, you should display the cursor that the user expects.


For the element shown above, I created my own version of a not-allowed cursor. You can do this by designing your cursor image in a 16 x 16 pixel size, and then saving it in an image format that can have a transparent background (.gif or .png). Below is example code to display the cursor.

<div class="showcursor" style="cursor:url(bones.gif) 2 2, pointer;">bones</div>

Note the two numbers in the style are the x-coordinate and y-coordinate of the cursor's hotspot.

When the user triggers the event that makes your custom cursor appear, there will be a slight delay while the image for the custom cursor is downloaded. To reduce or eliminate that delay, you can preload your image into a 1x1 pixel square and hiding it at the top of the page. Eample code for that is shown below.

<img border="0" width="1" height="1" src="bones.gif" />

More CSS Quick Reference:
• position:relative
• Use Inline Style
• Use word-wrap Property to allow Line Breaks in the Middle of Words
• Set the Font Boldness
• nth-child Selector
• Set the Border Width
• Set the border-collapse
• Specifying Color
• Set a Background Image
• Set an Element's Overlap (z-index)

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268