Gunnar Bittersmann: ID einen Wert runter zählen

Beitrag lesen

@@Freund:

nuqneH

wäre aber interessiert, ob man das auch ohne Javascript hinbekommen könnte.

Entweder – wie Matthias schon sagte – mit Ankern und :target, was aber den Nachteil hat, dass das angewählte Element nach oben springt.

Oder mit (nicht sichtbaren) Radiobuttons und :checked. Markup:

<figure>  
  <input type="radio" name="person" id="control-johndoe"/>  
  <label for="control-johndoe">  
    <img src="johndoe.jpg" alt="John Doe"/>  
  </label>  
  <p>John Doe is a handsome man.</p>  
</figure>  
<figure>  
  <input type="radio" name="person" id="control-janeroe"/>  
  <label for="control-janeroe">  
    <img src="janeroe.jpg" alt="Jane Roe"/>  
  </label>  
  <p>Jane Roe is a lovely woman.</p>  
</figure>

Stylesheet (ansatzweise):

figure input  
{  
  position: absolute;  
  left: -9999px;  
}  
  
figure p  
{  
  display: none;  
}  
  
figure :checked~label img  
{  
  width: 42%;  
}  
  
figure :checked~p  
{  
  display: block;  
}

Qapla'

--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)