In computing, 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. Mouseover control elements are common in web browsers. For example, hovering over a hyperlink triggers the mouseover control element to display a URL on the status bar. Site designers can define their own mouseover events using JavaScript[1] or Cascading Style Sheets.[2]

Mouseover events are frequently used in web design and graphical user interface programming.


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.[3]


<!-- 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
<ref>var myImg = document.getElementById('myImage');</ref>
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.
   alert('your message');


  1. ^ JavaScript OnMouseOver
  2. ^ Advanced CSS Menu | by Web Designer Wall
  3. ^ "A vocabulary and associated APIs for HTML and XHTML". Retrieved 16 February 2015.

External linksEdit

  • Hidden CSS Menu A multilevel mouseover-menu in pure CSS (i.e. no JavaScript)
  • Demonstration of navigation using only mouseover (requires Flash Player)