Frage Bereich bei Hover zu link, ansonsten nicht?

[gumpo03]

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.

<div class="wrapper">
  <a class="link">
    <div>Inhalt</div>
    <div class="hidden">Das wird nur ausgeklappt angezeigt</div>
  </a>
</div>

.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 :)

 

[LeCub]

Alles soll in HTML5 und CSS3 geschrieben werden.

Genau genommen gehört JS zu HTML5, was ist denn dein Grund für die Ablehnung gegenüber JavaScript?
Du könntest das nur mit CSS lösen, in dem du eine Checkbox in den wrapper setzt und bei einem check der Box den versetckten Div sichtbar machst. Du musst allerdings auch vor jedem "hidden" einen Punkt machen um die Klasse anzusprechen.

 

[SpiceLab]

Oder einfach den Code umsortieren, damit der Link auch erst im aufgeklappten Zustand erscheint :)

<div class="wrapper">  
  <div>Inhalt</div>
  <a class="link" href="...">
    <div class="hidden">Das wird nur ausgeklappt angezeigt</div>
  </a>
</div>

 

[LeCub]

Oder einfach den Code umsortieren, damit der Link auch erst im aufgeklappten Zustand erscheint :)

Dann hat man aber trotzdem dieses Rumgefummel mit Hover- Effekten auf Touch- Geräten.

 

[SpiceLab]

Dann hat man aber trotzdem dieses Rumgefummel mit Hover- Effekten auf Touch- Geräten.

Ich muß da nichts rumfummeln.

 

[gumpo03]

Ich persönlich kenne eine menge Leute die Javascript aus Sicherheitsgründen deaktivieren.
Eine CSS eigene Lösung wäre mir also am liebsten.

Eine Checkbox möchte ich aber nicht erst implementieren, das sieht ja nicht besonders schön aus.
Gibt es keine andere Lösung?

Das Problem mit der Lösung, dass das ganze erst aufgeklappt wird ist aber, dass dann nicht der gesammte Bereich ein Link ist sondern nur der Aufgeklappte. Im aufgeklappten Zustand soll aber der Gesammte Wrapper Bereich zum Link werden.

 

[LeCub]

Ich persönlich kenne eine menge Leute die Javascript aus Sicherheitsgründen deaktivieren.

Wer deaktiviert JS aus Sicherheitsgründen?!

Eine Checkbox möchte ich aber nicht erst implementieren, das sieht ja nicht besonders schön aus.

Man kann sie auch stylen. Wenn du nen Icon als Label nimmst und der box display: none gibst, sieht es zumindest nicht schlecht aus.

 

[djheke]

Guck mal, ob du sowas gebrauchen kannst.
www.gipspferd.de/forumhilfe/stellenangebot/index.html

 

[Tronjer]

Das ist ein CSS Hack und kein besonders sauberer. Weil er overflow:hidden benötigt und obendrein die URL manipuliert.

Wobei ich immer wieder erstaunt bin, wie sich Leute mit Händen und Füßen dagegen sträuben, JS zu erlernen. So etwas unterstütze ich nicht.

Zur Lösung dieser Aufgabe braucht es lediglich einen Eventlistener und ein .slideToggle().

 

[Arne Drews]

Hallo,

Muss mal OT fragen, da ich auch gerne dazu lerne:

Genau genommen gehört JS zu HTML5

Wie ist das gemeint?

Wer deaktiviert JS aus Sicherheitsgründen?!

Bspw. ich. Zumindest habe ich mehrere Browser, die unterschiedlich konfiguriert sind. Einer davon eben ohne JS, um "Bad-Scripts" gar nicht erst laufen zu lassen. Meinen Standard-Browser habe ich allerdings nicht so konfiguriert...

Wobei ich immer wieder erstaunt bin, wie sich Leute mit Händen und Füßen dagegen sträuben, JS zu erlernen. So etwas unterstütze ich nicht.

Dem stimme ich zu. Auch wenn wir festgestellt haben, dass wir beide unterschiedliche Meinungen zur grundlegenden Funktionalitäten haben :), sind JS-Technologien bspw. im Bereich der Usability heute unabdinglich.

Gruß Arne

 

[djheke]

Das ist ein CSS Hack und kein besonders sauberer. Weil er overflow:hidden benötigt und obendrein die URL manipuliert.

Beides erlaubt.

 

[Arne Drews]

Hallo,

Hat auch niemand behauptet, dass es nicht "erlaubt" sei. Gibt nur schönere Lösungen.

Gruß Arne

 

[djheke]

jepp

 

[gumpo03]

Wobei ich immer wieder erstaunt bin, wie sich Leute mit Händen und Füßen dagegen sträuben, JS zu erlernen. So etwas unterstütze ich nicht.

Zur Lösung dieser Aufgabe braucht es lediglich einen Eventlistener und ein .slideToggle().

Es ist nicht so als wenn ich kein JS könnte. Es ist nur so, das ich es für dieses Projekt nicht benutzen möchte.

Letztlich ist eine Lösung über RadioButtons aber nur bedingt möglich, da ich einerseits auf dem PC die Bereiche bei :hover aufklappen lasse und andererseits auf dem Handy bei :active :focus.
Mache ich den Bereich zu einem Radio Button müsste ich ja auch auf dem PC klicken um den Bereich zu öffnen, was ich nicht möchte.
Mache ich einfach den gesammten Bereich zum Link, kann ich auf dem Handy den Bereich nicht mehr aufklappen.

Mir ist noch eine Lösung über den Coursor in den Sinn gekommen, aber das hat bei meinem Test dann nicht funktioniert. (Ich teste es aber später noch einmal um sicher zu gehen, eventuell habe ich mich ja auch vertippt oder hatte einen Denkfehler.)

Bis jetzt scheint die einzige wirklich funktionierende Lösung über .mouseenter und .mouseleave zu sein. Und da ich bisher alles ohne JS zum laufen gebracht habe, wäre es suboptimal jetzt JS wegen so einem dämlichen Problems doch noch nutzen zu müssen.

 

[Arne Drews]

Hallo,

Mache ich den Bereich zu einem Radio Button müsste ich ja auch auf dem PC klicken um den Bereich zu öffnen, was ich nicht möchte.
Mache ich einfach den gesammten Bereich zum Link, kann ich auf dem Handy den Bereich nicht mehr aufklappen.

...und mit MediaRules entsprechend eins von beidem ein-/ausblenden?

Gruß Arne

 

[gumpo03]

Den Gesammten Wrapper zum Link machen kann ich damit ja aber auch nicht, nur den zugeklappten Bereich. Und wenn ich den zum Link machen möchte kann ich das jetzt schon, dafür brauche ich keine Radio Buttons.

Die einzige Lösung die mich weiter bringt ist eine CSS3 Lösung.
Ich habe es eben über pointer-events versucht. Das hat leider aber auch nicht geklappt.

 

[LeCub]

Wie ist das gemeint?

Das HTML5 interaktive Elemente mit JS umfasst, aber wie gesagt auch nur wenn man es ganz genau nimmt.

Die einzige Lösung die mich weiter bringt ist eine CSS3 Lösung.

Dann mach es so wie du willst und blende mit media queries eine gestylte checkbox ein, die gecheckt werden muss.