Beispiel:CSS grundlagen focus hover active.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>CSS-Beispiel: Link-Pseudoklassen</title>
<style>
a:focus { background-color: red; color: black;}
a:hover { background-color: blue; color: white; }
a:active { background-color: yellow; color: black; }
body { font: 1.5rem sans-serif; line-height: 2; }
a { padding: .2em; cursor: pointer}
kbd {
background: #f9f9f9 linear-gradient(to bottom, #eee, #f9f9f9, #eee) repeat scroll 0 0;
border: thin solid #aaa;
border-radius: 2px;
box-shadow: 1px 2px 2px #ddd;
font-family: inherit;
font-size: 0.9em;
padding: 0 0.5em;
}
</style>
</head>
<body>
<h1>Links mit dynamischen Pseudoklassen kennzeichnen</h1>
<ul>
<li><a href="https://wiki.selfhtml.org">SELFHTML</a></li>
<li><a href="https://forum.selfhtml.org">Forum</a></li>
<li><a href="https://blog.selfhtml.org">Blog</a></li>
</ul>
<p> Fahre mit der Maus über die Links und klicke sie an; achte auf den Cursor!<br>
Dann nutze die Tab-Taste (<kbd>↹</kbd>) um die Links mit der Tastatur anzusteuern.</p>
</body>
</html>
