How to Create a Hand Mouseover in CSS
Cascading style sheets (CSS) are text files attached to HTML pages that control the design and appearance of the page. CSS has several mouseover effects in addition to the ordinary "arrow." By default, most web browsers display the "hand" mouse pointer over active links, whether text or images. However, there is a method to force a "hand mouseover" in CSS. Be aware, however, that since "hand mouseover" usually indicates a hot-spot, such as a link, using it in places other than links may mislead website users.
Other People Are Reading
Instructions
-
-
1
Open the web page and the attached CSS file in two different windows using an HTML editor or a text editor such as Notepad.
-
2
Determine the area within the web page, where the "hand mouseover" effect needs to be active. Scan through the HTML code to locate the containing DIV tag for the corresponding area of the web page.
-
-
3
Note the CSS selector for the DIV tag, such as "id" or "class."
-
4
Skim through the CSS file and find the related code block that defines the DIV tag. Use any CSS selector for this purpose, "id" or "classes."
-
5
Add the CSS code line "cursor: pointer;" to the CSS code block of the DIV tag.
-
1
Tips & Warnings
CSS files completely separate the design from HTML source; so most design aspects may be completely handled with CSS alone, although Javascript code snippets can achieve similar functionality.
There are other mouse-pointer effects, such as crosshair, resize, help, move, progress, wait and text. Simple replacement of the CSS code line "cursor: pointer;" with the required effect is all that's needed to change the mouse-pointer in the given layout element, in this case the DIV tag.
Although "default" is an optional value for the CSS property "cursor," it's not necessary to mention it unless any parent tags are defined with custom cursor values, and the concerning child tag needs to possess default cursor values.
CSS "cursor" property is inherited by default, which means the child blocks will inherit cursor behavior from their parent blocks.
Hand mouseover is the default for cursors , when pointed over links. Forced hand-mouseovers on plain text or areas may mislead the users into thinking that they are actual links. This might adversely affect user experience within the web page or site.
CSS code lines and CSS code blocks are separated with semicolons and curly brackets, respectively. Omitting any such characters in CSS may cause unexpected errors and/or generate false HTML markup. The only exception is that the semicolon of a final CSS code line (just before the closing curly bracket) within a code block is not necessary.
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
