@@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)
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)