hover

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Partially Partially Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Applied Is not specified
HTML analog <tag onmouseover="function()">
Reference to specification http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes

Description
It defines element style at prompting of the mouse cursor on it, thus the element is not activated, the mouse button is not clicked.

Syntax

A:hover { ... }

Arguments
No.

Example 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>link</title>
  <style type="text/css">
   a:link {
    color: #0000d0; /* Links' color */
    padding: 2px; /* Areas around the text */ 
   }
   a:hover {
    background: #786b59; /* Background color under the link */ 
    color: #ffe; /* Link color */ 
   } 
  </style>
 </head>
 <body>
 
  <p><a href="link1.html">Link 1</a></p>
  <p><a href="link2.html">Link 2</a></p>
  <p><a href="link3.html">Link 3</a></p> 
 
 </body>
</html>

In this example the pseudoclass "hover" is applied to the link (tag <A>). The result of this example is shown on the figure 1.


Example 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>hover</title>
  <style type="text/css">
   UL {
    width: 180px; /* Menu width */
    list-style: none; /* Remove markers for the list */
    margin: 0; /* No indents around */
    padding: 0; /* Remove areas around the text */
    font-family: Arial, sans-serif; /* Sans-serif font for menu point */
    font-size: 10pt; /* Title size in the menu item */
   }
   UL LI  {
    position: relative; /* Subitems are positioned relatively */
   }
   LI UL {
    position: absolute; /* Submenu are positioned absolutely */
    display: none; /* Hide submenu */
    top: 0; /* The submenu location is primary by the height */
    left: 179px; /* Right shift of the submenu */
    z-index: 1; /* The main menu is placed below the submenu */
   }
   LI A {
    display: block; /* Link as block element */
    width: 100%; /* Link through whole point width */
    padding: 5px; /* Areas around the inscription */
    text-decoration: none; /* Remove links underlining */
    color: #666; /* Text color */
    border: 1px solid #ccc;	/* Frame around submenu items */
    background-color: #f0f0f0; /* Background color */
    border-bottom: none; /* Don't make the bottom border */
   }
   LI A:hover {
    color: #ffe; /* Text color of active point */
    background-color: #5488af; /* Background  color of active point*/
   }
   LI:hover UL, LI.over UL { 
    display: block; /* Submenu is imaged in the time of point dedication by the mouse cursor */
   }
   .brd {
    border-bottom: 1px solid #ccc; /* Bottom line */
   }
  </style>
 </head>
 <body>
 
  <ul id="menu">
   <li><a href="russian.html">Russian cooking</a>
    <ul> 
     <li><a href="linkr1.html">Beef Stroganoff</a></li> 
     <li><a href="linkr2.html">Goose with apples</a></li> 
     <li><a href="linkr3.html">Novgorod buckwheat pudding with curds</a></li> 
     <li><a href="linkr4.html" class="brd">Russian crawfishes</a></li> 
    </ul> 
   </li> 
   <li><a href="ukrainian.html">Ukrainian cooking</a> 
    <ul> 
     <li><a href="linku1.html">Curds</a></li> 
     <li><a href="linku2.html">Kharkov roast meat</a></li> 
     <li><a href="linku3.html">Chernigov cabbage dish</a></li> 
     <li><a href="linku4.html" class="brd">Potapts with tomatoes</a></li> 
    </ul> 
   </li>
   <li><a href="caucasus.html">Caucasian cooking</a> 
    <ul> 
     <li><a href="linkc1.html">Soup-kharcho</a></li> 
     <li><a href="linkc2.html">Lilibdg</a></li> 
     <li><a href="linkc3.html">Chikhirtma</a></li> 
     <li><a href="linkc4.html" class="brd">Shish kebab</a></li> 
    </ul> 
   </li> 
   <li><a href="asia.html" class="brd">Central Asian cooking</a></li> 
  </ul>
 
 </body>
</html>

In this example the pseudoclass "hover" is added to the list element (tag <L1>) for two level menu creating. The result of this example is shown on the figure 2.


Remark
In the browser Internet Explorer version 6 and earlier the pseudoclass "hover" works only for links.