Software, your way.
How To Get Good Custom Software
(Download)
(PDF)
burger menu icon
WillMaster

WillMaster > LibraryWeb Content Preparation

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

Enabling the Cursor Pointer

The cursor pointer is the mouse pointer shaped like a hand with pointing index finger.mouse pointer cursor (The mouse pointer can vary from browser to browser.)

When the mouse cursor moves or hovers over a link, you see the pointer. It indicates something that is clickable.

Some clickable HTML elements do not provide the mouse pointer when hovered over.

Form buttons are an example. Checkbox and radio button labels are another example. As is the summary element.

All of those and any other HTML elements can be told to display the pointer when the mouse cursor moves over it.

It is accomplished with the CSS cursor:pointer; declaration.

Here is an example form button. If you are using a laptop or desk computer with a mouse, the mouse cursor will change to a pointer when you hover over the button.

Here is the code for the above button.

<input 
   type="button" 
   style="cursor:pointer;" 
   value="Test Button">

Now, let's illustrate the pointer with a checkbox and its label text. Move your mouse pointer over the example to see the effect.

This is the source code:

<label style="cursor:pointer;">
<input type="checkbox">
I'm in the other room.
</label>

One more example.

Summary of something

When you move your mouse cursor over the above summary line, the cursor changes to the pointer.

When hovering over the summary line, the mouse cursor changes to a pointer. Here is the source code.

<details style="border-left:3px solid #ccc; padding-left:6px;">
<summary style="cursor:pointer;">Summary of something</summary>
<p>
When you move your mouse cursor over the above summary line, the cursor changes to the pointer.
</p>
</details> 

Those are just 3 examples. Any HTML element with content can be given the cursor:pointer; style.

(This content first appeared in Possibilities newsletter.)

Will Bontrager

Was this article helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method

All information in WillMaster Library articles is presented AS-IS.

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2024 Will Bontrager Software LLC