computing Computing is any goal-oriented activity requiring, benefiting from, or creating computing machinery. It includes the study and experimentation of algorithmic processes, and development of both hardware and software. Computing has scientific, ...

, a mouseover, mouse hover or hover box is a graphical control element that is activated when the user moves or hovers the pointer over a trigger area, usually with a mouse, but also possible with a

digital pen A digital pen is an input device which captures the handwriting or brush strokes of a user and converts handwritten analog information created using "pen and paper" into digital data, enabling the data to be utilized in various applications. This ...

. Mouseover control elements are common in

web browsers A web browser is application software for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen. Browsers are used on ...

. For example, hovering over a hyperlink triggers the mouseover control element to display a URL on the

status bar A status bar is a graphical control element which poses an information area typically found at the window's bottom. It can be divided into sections to group information. Its job is primarily to display information about the current state of its ...

. Site designers can define their own mouseover events using

JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, of ...

or Cascading Style Sheets. 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 e ...

s are frequently used in

web design Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design (UI design); authoring, including standardised code a ...

and

graphical user interface The GUI ( "UI" by itself is still usually pronounced . or ), graphical user interface, is a form of user interface that allows users to interact with electronic devices through graphical icons and audio indicator such as primary notation, inst ...

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 The tooltip, also known as infotip or hint, is a common graphical user interface (GUI) element in which, when hovering over a screen element or component, a text box displays information about that element, such as a description of a button's f ...

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 The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaSc ...

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