button:focus - anderes, nicht verschachteltes Element formatieren

[ebody]

Hallo,

ich möchte ein anderes Element einblenden, wenn auf einen Button geklickt wird. Der Button und das Element sind nicht verschachtelt. Das klappt soweit schon mal:

<button id="b1">Button 1</button>
<div>Hallo Welt!</div>

#b1:focus + div{
  display: block;
}

Was aber nicht funktioniert ist, wenn der Button verschachtelt wird

<p>
  <button id="b2">Button 2</button>
</p>
<div>Hallo Welt!</div>

p > #b2:focus + div{
  display: block;
}

Das Element vor <div> ist jetzt <p> und der :focus liegt aber auf dem Button, daher habe ich folgendes probiert, was aber auch nicht funktioniert.

p:focus + div{
  display: block;
}

Zudem soll sich der :focus auch nur auf den <button> beziehen, wenn <p> z.B. breiter als der <button> ist...

Ich habe noch verschiedenes ausprobiert, aber leider finde ich keine Lösung und wende mich daher ans Forum, in der Hoffnung, dass jemand die Lösung kennt.

Gruß ebody

[Matthias Apsel]

Hallo ebody,

mit dem derzeitigen CSS geht das nicht.

Bis demnächst
Matthias

[Der Martin]

Hallo,

mit dem derzeitigen CSS geht das nicht.

damit wäre also Javascript das Mittel der Wahl.

Um Javascript-losen Clients keine möglicherweise wichtige Information vorzuenthalten, sollte das Element dann aber von Haus aus eingeblendet und per Javascript ausgeblendet werden.

Schönes Wochenende,
 Martin

[Rolf B]

Hallo ebody,

nur mal der Neugierde halber: welches Problem willst Du damit lösen?

Es gibt nämlich Verhaltensunterschiede. Klicke ich mit der Maus auf den Button (und lasse sie versehentlich auch dort wieder los), so bekommt der Button den Fokus und der Text wird sichtbar, wenn die Buttonaktion bereits ausgelöst ist.

Wenn ich mich mit der Tastatur durchtabbe, bekommt der Button den Fokus ohne ausgelöst worden zu sein.

Wenn Du Zusatzinformationen zum Button einblenden willst, die man VOR dem Drücken haben möchte, bist Du bei Mausbedienung falsch unterwegs.

Wenn Du eine "Button wurde geklickt" Anzeige willst, bist Du bei Tastaturbedienung falsch unterwegs.

Ja gut. Also nicht nur Neugierde. Sondern die Befürchtung des A-B-Problem-Jägers, dass Du einen Eingabekanal nicht richtig behandeln könntest.

Rolf

[ebody]

Hi,

es geht um ein Menü in der mobilen Darstellung. Ich möchte ein "Burger Menü" Button erstellen. Wenn man darauf klickt, soll das Menü ausklappen. Statt einem Button, habe ich mittlerweile aber eine Checkbox verwendet. Damit lässt es sich bis jetzt alles besser händeln. Bin aber noch am basteln und habe noch keine Tests in anderen Browsern gemacht oder was Barrierefreiheit angeht oder so.

Gruß ebody

[Gunnar Bittersmann]

@@ebody

es geht um ein Menü in der mobilen Darstellung. Ich möchte ein "Burger Menü" Button erstellen. Wenn man darauf klickt, soll das Menü ausklappen.

☞ Inclusive Components ☞ Menus & Menu Buttons

Das gibt’s jetzt auch auf totem Holz.

Statt einem Button, habe ich mittlerweile aber eine Checkbox verwendet. Damit lässt es sich bis jetzt alles besser händeln. Bin aber noch am basteln und habe noch keine Tests in anderen Browsern gemacht oder was Barrierefreiheit angeht oder so.

Mach das mal – und du wirst sehen, dass der Checkbox-Hack ungeeignet ist, um etwas dynamisch auf- und zuzuklappen. Nicht verwenden!

LLAP 🖖

[ebody]

Danke, werde ich mir noch in ruhe anschauen.

Gruß ebody

[Rolf B]

Hallo ebody,

dann halt Dich mal an Gunnars Links. Für ein Dropdown-Menü war die Idee ein tiefer Griff in kaltes Wasser, das hättest Du auch mit der Brechstange nicht zum Funktionieren bekommen.

Oh. Höre ich da ein leises „Challenge accepted“? Bitte nicht 😂

Rolf

[A. Kupferschmidt]

Meinst du vielleicht so etwas

<button class="button" onclick="showDiv('st1'); return false" >Stufe 1</button>

Class="button" macht die Gestaltung des Schalters ('st1') ist die ID-Variable nach gesucht werden soll (ID="st1")

Stufe 1< ist die Beschriftung des Button

Damit das funktionier brauchst du noch einen Skript:

<script type="text/javascript">
function showDiv(id) {
    if(document.getElementById) {
        var mydiv = document.getElementById(id);
        mydiv.style.display = (mydiv.style.display=='block'?'none':'block');
    }
}
</script>

Der Container wird dann wie folgt aufgerufen:

<div id="st1" style="display: none;">
.......
</div>

Klickst du den Button erscheint an der Stelle, an dem du deinen DIV-Container gestellt hast das was zwischen Div id="st1" bis /Div steht.

Vorteil: ist der Schalter nicht betätigt "schrumpft" deine Seite. es wird kein Platz für deinen Containerinhalt benötigt. Drückst du den Schalter ein zweites mal, wir der eingefügte Teil wieder entfernt. Du kannst auch mehrer Container hintereinander Schalten, ohne das die Seite beim ersten anzeigen die volle Länge zeigt.

Nachteil: Rückwirkend mit CSS oder Java auf Style oder Funktion innerhalb der Divcontainers einzugreifen ist nicht leicht.

Hier mein Style für den Button:

<style type="text/css">
.button {
 width: ; /* Breite des Buttons */
 height: 25px; /* Höhe des Buttons */
 border: 1px solid #aaa; /* Rahmen */
 border-radius: 5px; /* Abgerundete Ecken */
 background: #eee; /* Hintergundfarbe für ältere Browser */
 background-image: linear-gradient(#cdffbc, #6ec153); /* Farbverlauf */
 display: block; /* Darstellung als Block-Element */
 text-align: center; /* Horizontale Text-Ausrichtung */
 text-decoration: none; /* Links nicht unterstrichen */
 color: #333; /* Textfarbe */
}
.button:hover {
background-image: linear-gradient(#6ec153, #cdffbc); /* Farbe */
color: white;
}
</style>

Edit Rolf B: HTML umrahmt man mit ~~~html (zu Beginn) und ~~~ (am Ende)

[A. Kupferschmidt]

Und hier liegt mein Problem

Ich habe in diesem Divcontainer eine Bilddatei und möchte, das diese bei einem Mousover vergrößert wird. Leider funktioniert die Funktion

img:hover {width: 581pc; hight: 367px;}

nicht. Da sich das Bild, wie gesagt, in einem Divcontainer befindet.

hat jemand eine Idee?

PS. ich bin neu hier und nicht sicher ob ich die Frage hier so stellen darf/kann wenn nicht, dann bitte nicht böse sein und meinen Beitrag verschieben, DANKE!

[Gunnar Bittersmann]

@@A. Kupferschmidt

Damit das funktionier brauchst du noch einen Skript:

Damit das funktioniert, muss das Script (der Script??) noch etwas mehr tun, wie ich euch in diesem Thread schon gelinkt hatte.

mydiv.style.display = (mydiv.style.display=='block'?'none':'block');

Anstatt in JavaScript direkt mit der CSS-Eigenschaft display rumzuhantieren bietet sich an, das HTML-Attribut hidden ^[1] zu setzen bzw. zurückzusetzen:

mydiv.hidden = !mydiv.hidden;

Der Container wird dann wie folgt aufgerufen:

<div id="st1" style="display: none;">

Der Container wird dann wie folgt aufgerufen:

<div id="st1" hidden>

---

.button {
 width: ; /* Breite des Buttons */
 height: 25px; /* Höhe des Buttons */
 border: 1px solid #aaa; /* Rahmen */
 border-radius: 5px; /* Abgerundete Ecken */
 background: #eee; /* Hintergundfarbe für ältere Browser */
 background-image: linear-gradient(#cdffbc, #6ec153); /* Farbverlauf */
 display: block; /* Darstellung als Block-Element */
 text-align: center; /* Horizontale Text-Ausrichtung */
 text-decoration: none; /* Links nicht unterstrichen */
 color: #333; /* Textfarbe */
}
.button:hover {
background-image: linear-gradient(#6ec153, #cdffbc); /* Farbe */
color: white;
}

Die Kommentare sind überflüssig, wenn sie lediglich eine Übersetzung des sich selbsterklärenden Codes ins Deutsche sind.

Nicht überflüssig ist ein Wert für width.

LLAP 🖖

---

1. Mit Absicht die W3C-Spec verlinkt. Die WTFWG-Spec erzählt Unsinn. Hixieismus. ↩︎