In computing, a mouseover, mouse hover or hover box is a

graphical control element A graphical widget (also graphical control element or control) in a graphical user interface is an element of interaction, such as a button or a scroll bar. Controls are software components that a computer user interacts with through direct ...

that is activated when the

user Ancient Egyptian roles * User (ancient Egyptian official), an ancient Egyptian nomarch (governor) of the Eighth Dynasty * Useramen, an ancient Egyptian vizier also called "User" Other uses * User (computing), a person (or software) using an ...

moves or hovers the pointer over a trigger area, usually with a

mouse A mouse ( : mice) is a small rodent. Characteristically, mice are known to have a pointed snout, small rounded ears, a body-length scaly tail, and a high breeding rate. The best known mouse species is the common house mouse (''Mus musculus' ...

, but also possible with a digital pen. Mouseover control elements are common in web browsers. For example, hovering over a

hyperlink In computing, a hyperlink, or simply a link, is a digital reference to data that the user can follow or be guided by clicking or tapping. A hyperlink points to a whole document or to a specific element within a document. Hypertext is text wit ...

triggers the mouseover control element to display a

URL A Uniform Resource Locator (URL), colloquially termed as a web address, is a reference to a web resource that specifies its location on a computer network and a mechanism for retrieving it. A URL is a specific type of Uniform Resource Identifie ...

on the status bar. Site designers can define their own mouseover events using JavaScript or

Cascading Style Sheets Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone techno ...

. Mouseover

event Event may refer to: Gatherings of people * Ceremony, an event of ritual significance, performed on a special occasion * Convention (meeting), a gathering of individuals engaged in some common interest * Event management, the organization of eve ...

s are frequently used in web design and graphical user interface programming. It is also known as rollover, which refers to a button created by a web developer or web designer, found within a web page, used to provide interactivity between the user and the page itself. The term rollover in this regard originates from the visual process of "rolling the mouse cursor over the button" causing the button to react (usually visually, by replacing the button's source image with another image), and sometimes resulting in a change in the web page itself. The part of the term 'roll' is probably referring to older mice which had a mechanical assembly consisting of a hard rubber ball housed in the base of the mouse (which rolls) contrary to the modern optical mouse, which has no rolling parts. Rollovers can be done by imagery, text or buttons. The user only requires two images/buttons (with the possible addition of "alt" text to these images) to perform this interactive action. Rollover imagery can be done either by a program with a built-in tool or script coding. The user will have to pick a first image and select an alternate secondary image. A mouse action will have to be set to either "click on" or "mouse over" in order for the rollover to be triggered. When the mouseover moves on the image, the alt image/secondary image will appear but won't stay - when the user "mouses out" by moving the mouse away from the image, the original source image will reappear.

Tooltip

A special usage of mouseover event is a tooltip which shows a short description of the object under the pointer. The tooltip appears only after the mouse or stylus is held over the object for a certain amount of time. On images, these may be produced using the HTML title attribute.

Examples

// JavaScript code without any framework var myImg = document.getElementById('myImage'); function myMessage() if (myImg.addEventListener) else if (myImg.attachEvent) else // jQuery example. It degrades well if JavaScript is disabled in the client browser. $("img").mouseover(function());

References

External links

Hidden CSS Menu
A multilevel mouseover-menu in pure CSS (i.e. no JavaScript)
DontClick.it
Demonstration of navigation using only mouseover (requires Flash Player) {{Graphical control elements Graphical control elements