Pseudoklasse :focus

[Mathias Brodala]

Hallo uwe.

durch Zufall bin ich auf eine Designidee gestoßen, die mir wirklich gut gefällt und die ich gerne in etwas abgewandelter Form einsetzen möchte:

http://www.cssplay.co.uk/menu/one_page.html

Statt bei :hover den Tab Inhalt sofort wieder auszublenden, würde ich es allerdings lieber sehen, wenn der alte Inhalt sichtbar bleibt und erst bei :focus eines anderen Tabs ausgeblendet und durch einen neuen Inhalt ersetzt wird. Ist das überhaupt möglich?

Nur wenn du eine geschickte Verschachtelung nutzt. Fokussierbar sind einzig und alleine Links und Formularelemente. Letztere sind aber hier nicht sonderlich praktikabel, weshalb du Links nehmen solltest.

Hier einmal ein minimaler Vorschlag:

li {  
  float:left;  
  list-style:none;  
  padding:0 5em;  
}  
li p {  
  display:none;  
}  
li a:hover+p,  
li a:focus+p {  
  display:block;  
}

<ul>  
  <li>  
    <a href="">Foo</a>  
    <p>Foo Bar Baz Qux</p>  
  </li>  
  <li>  
    <a href="">Bar</a>  
    <p>Bar Baz Qux Foo</p>  
  </li>  
  <li>  
    <a href="">Baz</a>  
    <p>Baz Qux Foo Bar</p>  
  </li>  
</ul>

Hierbei werden die Absätze sowohl beim Hovern, als auch beim Fokus sichtbar. Unterbindest du nun noch per JS die Ausführung der Links, kann man dies auch durch normale Klicks erreichen. Wirklich praktikabel funktioniert das ganze aber leider nur in Firefox und Konqueror.

Einen schönen Mittwoch noch.

Gruß, Mathias