Mouseover

Please help improve this article by expanding it. Further information might be found on the talk page. (November 2007)

A Mouseover or hover box refers to a GUI event that is raised when the user moves or "hovers" the cursor 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^[1] and Cascading Style Sheets.^[2] 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 cursor. The tooltip generally appears only after the mouse is held over the object for a certain amount of time.

Examples

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

// javascript 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 | degrades well if javascript is disabled in client browser
$("img").mouseover(function(){
   alert('your message');
});

References

External links

• Hidden CSS Menu—A multilevel mouseover-menu in pure CSS (i.e. no JavaScript)