Mouseover

In computing, a mouseover, mouse hover or hover box refers to a section of a computer user-interface that is raised when the user moves or "hovers" the pointer over a particular area of the GUI. The technique is particularly common in web browsers where the URL of a hyperlink can be viewed in the status bar. Site designers can easily define their own mouseover events using JavaScript and Cascading Style Sheets. In case of multiple layers the mouseover event is triggered by the uppermost layer.

Mouseover events are not limited to web design and are commonly used in modern GUI programming. Their existence might not even be known to the user as the events can be used to call any function and might affect only the internal workings of the program.

Tooltip

A special usage of mouseover event is a tooltip showing a short description of the GUI object under the pointer. The tooltip generally appears only after the mouse is held over the object for a certain amount of time.

Examples

<!-- Direct usage is not recommended. It does not conform with web standards. -->
<img id="myImage" src="/images/myImage.jpg" onMouseOver="alert('your message');">

// JavaScript code without any framework
var myImg = document.getElementById('myImage');
 
function myMessage() {
    alert('your message');
}
 
if(myImg.addEventListener) { //addEventListener is the standard method to add events to objects.
    myImg.addEventListener('mouseover', myMessage, false);
}
 
else if(myImg.attachEvent) { //For Internet Explorer
    myImg.attachEvent('onmouseover', myMessage);
}
 
else { //For other browsers
    myImg.onmouseover = myMessage;
}

// jQuery example. It degrades well if JavaScript is disabled in the client browser.
$("img").mouseover(function(){
   alert('your message');
});

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)