Beispiel:CSS grundlagen focus hover active.html

Aus SELFHTML-Wiki

Wechseln zu: Navigation, Suche

<!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>

Links mit dynamischen Pseudoklassen kennzeichnen

<a href="https://wiki.selfhtml.org">SELFHTML</a>
<a href="https://forum.selfhtml.org">Forum</a>
<a href="https://blog.selfhtml.org">Blog</a>

Fahre mit der Maus über die Links und klicke sie an; achte auf den Cursor!
Dann nutze die Tab-Taste (↹) um die Links mit der Tastatur anzusteuern.

 </body>

</html>

Abgerufen am 21.08.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:CSS_grundlagen_focus_hover_active.html"