Warning: Undefined array key "StartingPoint" in /customers/f/f/0/safaribears.de/httpd.www/content.php on line 107 Warning: Cannot modify header information - headers already sent by (output started at /customers/f/f/0/safaribears.de/httpd.www/content.php:107) in /customers/f/f/0/safaribears.de/httpd.www/content.php on line 115 Warning: Undefined variable $WEB_ROOT in /customers/f/f/0/safaribears.de/httpd.www/content.php on line 118 Warning: Cannot modify header information - headers already sent by (output started at /customers/f/f/0/safaribears.de/httpd.www/content.php:107) in /customers/f/f/0/safaribears.de/httpd.www/content.php on line 118 Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /customers/f/f/0/safaribears.de/httpd.www/content.php on line 169 CSS Tutorial - Pseudo-Classes Elements - :hover & :active & :focus

These three dynamic pseudo classes deal with user interaction. They do not only work with links, but with all (?) elements. Apart from links, also input fields from forms are living from user interaction and might be changed.

a.linkexample2:link,
a.linkexample2:visited{
font-decoration:none;
border:dotted green 1px;
color:black;
padding-left:0.25em;
padding-right:0.25em;
background-color:white;
}

a.linkexample2:hover{
font-decoration:none;
font-weight:900; border:none;
color:black;
padding-left:0.25em;
padding-right:0.25em;
background-color:transparent;
}

a.linkexample2:active{
font-decoration:underline overline;
font-weight:900; border:none;
color:red;
padding-left:0.25em;
padding-right:0.25em;
background-color:transparent;
}

Hover over this link and see what happens. You might want to click on it, too (wait with releasing the button again).
That event (while you hold your mouse button down, is the 'active' event, and the looks of the link (or button, or any other of those element) can be changed via the :active pseudo-class.
:focus deals with those elements, that have the focus. They receive the user action (when you type on your keyboard, the text will appear in the active input field).

You can hover over these two input fields, and you can click on them, or use the tab key, to see what happens.


The support for the :focus pseudo class is there with the modern browsers, like Opera and Firefox. IE (as usual) has some problems: it doesn't react to :hover and :focus.