• Home  / 
  • Usability
  •  /  Using Mouse Overs or Hovers in Web Design

Make sure you don't miss the latest insights and tips. Click here to sign up for my mailing list now! ยป

Using Mouse Overs or Hovers in Web Design

Mouseovers can be implemented through various technologies:

  • HTML properties (e.g. ‘hover’ and ‘active’ link colours)
  • Switching images using JavaScript
  • CSS styles (can apply link colours, and all properties can be switched using JavaScript – highly recommended)
  • Flash, Shockwave, Java etc.

Whichever technology is used, there are four core principles to follow to make sure mouseovers enhance usability.

Principles for effective mouseovers

  1. Use only for highlighting hotspots or associating complex elements
  2. Direct effect: the entire visual element should respond to mouseover
  3. Highlighting: live links should respond positively to activation
  4. Timing: Mouseover behaviour should respond directly to mouse stimulus

1) Use only for highlighting hotspots or associating complex elements

Mouseover behaviour really does one thing, which is to say: This is the current mouse target.

This information has three main uses:

  1. Highlighting an active link or hotspot: “This is clickable”
  2. Highlighting the scope of a clickable hotspot: “If you click now, you’re clicking *this*”
  3. Showing the user the scope of the current object, e.g. highlighting a row on a table tells you “All these pieces of data are the *current thing*” (see simple example on right).
    This may or may not also represent a clickable area.

Each of these uses can increase usability.
They are now practically a universal standard (even more than simply a convention), standard practice on MacOSX and WinXP’s buttons.

Do not use mouseovers gratuitously.
Unless you’re highlighting an active link or hotspot, or giving the user useful information, don’t use a mouseover effect.

2) Direct effect: the entire visual hotspot element should respond to mouseover

For mouseover highlighting to work, there should be a direct mapping between cause and effect.
Any visual change should affect the entire active hotspot.
This gives the user useful information about the size and integrity of the clickable object.

People sometimes wave the mouse over unclear navigation controls, in order to gather information on what’s clickable by noticing what responds to mouseover.

There are circumstances when the link’s action will affect another screen element, when it may be appropriate for that other screen element also to change visually.
In such cases, the hotspot must also change, in order to satisfy mouseover rules.

Hyperlinks in text can have mouseover effects (using the CSS pseudo-classes a:hover and a:active).
Web browsers ensure that the whole link responds to mouseover.
What about when text hyperlinks are featured in boxes, such as buttons, tabs or other navigation elements?
If the HTML anchor is placed around the text, only the text will respond to the mouseover.
Be careful, if the entire box highlights, the entire box must be an active hyperlink (the nav on web pro world doesn’t do this).

3) Highlighting: live links should respond positively to activation

A subtle lightening or addition of colour is often best.

If a link is ‘live’, any mouseover effect should have the effect of highlighting, showing that it is active or ready.
(Good example: www.bizntips.com, on some of the main nav tabs, but why not all?)

However, be careful that any lightening effect doesn’t reduce contrast so much that the link recedes!

4) Timing: Mouseover behaviour should respond directly to mouse stimulus.

That means that the ‘highlight’ effect should remain as long as the mouse button is down over the element.
The effect should not flash and go back to normal, unless the mouse leaves the target area (see e.g. http://www.diy-hosting.com).
If the mouse moves outside the target area (whether the button is down or up), the element should revert to its default, un-highlighted state.

Make sure that both ‘on’ and ‘off’ effects appear instantaneous.
Any delay more than a split-second degrades the user experience significantly.

For this reason, I recommend using CSS for mouseovers wherever possible.
Many effects that can be achieved through switching images can be achieved in CSS, with the added benefits of greater flexibility and easier maintenance.

Example: michaelheppell.com

This is a good site (and the book is brilliant!).

Screenshot of www.michaelheppell.com

BUT, if you mouse over the ‘About be Brilliant’ panel, and the graphic actually blurs!
Try it:

This is totally wrong, because it breaks the 2nd Principle.
Blurring an element makes it seem less – not more – active.
It suggests “unavailable”, as though it’s moving away from you.

It doesn’t want you to click it!

Update: They’ve now removed this effect from the site – well done!

About the author

Ben Hunt

Ben is the creator of Web Design From Scratch. He started writing articles about web design to kill time on a long train commute, and is now one of the most influential figures on the subject of effective web design. He has written three books and spoken at multiple conferences internationally.

Bert Weissensee - last year

I found this helpful!

Tommy - 10 months ago

Hi guys, could you update the links
The sample with
michaelheppell.com
http://www.bizntips.com
are no longer available.

Kind regards, Tommy

    Ben Hunt - 10 months ago

    Hi Tommy. Michael Heppell’s site is still there, and has since been redesigned (it’s an old article). The BiznTips site is gone, you’re right.

Comments are closed