Hi. ich habe ein neues Problem zu dem ich auch nach umfangreichen Recherchen keine lösung gefunden habe.
Zuerst mal zum Grundlegenden. Ich werde keine JS verwenden. Alles soll in HTML5 und CSS3 geschrieben werden.
Ich habe auf einer Webseite einen <div> Bereich, welcher bei :hover, :active und :focus aufklappt (active und focus für die mobile Darstellung), so dass mehr Inhalt erscheint.
Ich möchte nun das ich beim Klicken auf diesen aufgeklappten Bereich weiter geleitet werde.
An sich könnte ich ja nun einfach den Bereich mit <a> zu einem Link machen, doch da die Seite auch Mobil funktionieren soll, könnte ich dann ja auf dem Handy den Bereich nicht aufklappen sondern würde direkt verbunden werden.
Ich hoffe ihr könnt mir helfen :)
Zuerst mal zum Grundlegenden. Ich werde keine JS verwenden. Alles soll in HTML5 und CSS3 geschrieben werden.
Ich habe auf einer Webseite einen <div> Bereich, welcher bei :hover, :active und :focus aufklappt (active und focus für die mobile Darstellung), so dass mehr Inhalt erscheint.
Ich möchte nun das ich beim Klicken auf diesen aufgeklappten Bereich weiter geleitet werde.
An sich könnte ich ja nun einfach den Bereich mit <a> zu einem Link machen, doch da die Seite auch Mobil funktionieren soll, könnte ich dann ja auf dem Handy den Bereich nicht aufklappen sondern würde direkt verbunden werden.
HTML:
<div class="wrapper">
<a class="link">
<div>Inhalt</div>
<div class="hidden">Das wird nur ausgeklappt angezeigt</div>
</a>
</div>
Code:
.wrapper {
width:100%;
height:30px;
background-color: #123;
}
.link {
/* Was muss hier rein?! */
}
.hidden {
opacity:0;
}
.wrapper:hover hidden, .wrapper:active hidden, .wrapper:focus hidden {
opacity:1;
}
.wrapper:hover, .wrapper:active, .wrapper:focus {
height: 50px;
}
Ich hoffe ihr könnt mir helfen :)