Mouseover

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 its trigger area, usually with a mouse, but also possible using a digital pen. The graphical control element 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/or 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 pointer. The tooltip generally 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]

Criticism

Some websites use links that give no visible indication of what the link points to, and in some cases, no indication at all that it's even a link. When websites do this, it's called pig in a poke or mystery meat navigation. This type of design makes such websites difficult to use since users don't know where to find the link they need.

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
<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.
$("img").mouseover(function(){
   alert('your message');
});

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)