The CSS reference

":hover" - css pseudo-class (v. css 1)

  • Will add a style to an element when you mouse is over it.
  • For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element.
  • HTML usage: all elements
  • Note: that the :hover must be placed after the :link and :visited rules, since otherwise the cascading rules will hide the 'color' property of the :hover rule.
  • Similarly, because :active is placed after :hover, the active color will apply when the user both activates and hovers over the element.
  • Browsers that support the :hover - pseudo-class :
    Internet Explorer Mozilla Firefox Opera Google Chrome Apple Safari
Typical usage:
a:hover   { color: yellow } /* user hovers     */

Pseudo-class ":hover" example:

    <title>Page title</title>
    <style type="text/css">
      input[type='submit']:hover {
        background-color: #FF8000;
        color: #0080FF; }
     input[type='submit']:active {
        background-color: #0000FF;
        color: #FFFF00; }
      a:link {   background-color: #000000;
        color: #FFFFFF; }
      a:visited { background-color: #97FF31;
        color: #9831FF;  }
      a:hover { background-color: #7171E8;
        color: #E8E871; }
      a:active { background-color: #0000FF;
        color: #FFFF00; }
    <form action="" target="_blank">
      Go to : <input type="submit" value="Yahoo" />
    <a href="" target="_blank">
      Go to!</a>
© 2010 by Finnesand Data. All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the correctness in the pages or source codes.
The risk of using this web-site pages or any program codes from this website is entirely at the individual user.