Interaktion mit CSS

[Michael_K]

Hallo,

ist es mögliche, die CSS Eigenschaften fuer eine Element ueber die Mouse Interaktion auf eine anderes Element der gleichen DOM-Ebene zu steuern?

<div>
   <a href="#" id="a">bla</a>
   <p id="b">block feld</p>
</div>

Fuer obiges Beispiel. Wenn der Link geglickt wird, dann sollte die Position von </p> geaendert werden. Gibt es da einen Moeglichkeit?

Dankbar fuer Hinweise

[Christian Kruse]

Hallo Michael_K,

ist es mögliche, die CSS Eigenschaften fuer eine Element ueber die Mouse Interaktion auf eine anderes Element der gleichen DOM-Ebene zu steuern?

<div>
   <a href="#" id="a">bla</a>
   <p id="b">block feld</p>
</div>

Fuer obiges Beispiel. Wenn der Link geglickt wird, dann sollte die Position von </p> geaendert werden. Gibt es da einen Moeglichkeit?

Du kannst den +-Selektor verwenden:

a:hover + p {
  /* … */
}

LG,
CK

[MudGuard]

Hi,

Fuer obiges Beispiel. Wenn der Link geglickt wird, dann sollte die Position von </p> geaendert werden. Gibt es da einen Moeglichkeit?

Während des Klicks? Ja. a:active + p { position: …; }

So daß die Position auch nach dem Klick geändert bleibt: m.W. nein.

Wenn der Link gar nicht auf eine andere Seite oder eine andere Stelle derselben Seite verlinkt, sondern nur eine andersartige Aktion in derselben Seite bewirken soll, wäre vermutlich ein button besser geeignet.

cu,
Andreas a/k/a MudGuard

[Christian Kruse]

Hallo MudGuard,

Fuer obiges Beispiel. Wenn der Link geglickt wird, dann sollte die Position von </p> geaendert werden. Gibt es da einen Moeglichkeit?

Während des Klicks? Ja. a:active + p { position: …; }

So daß die Position auch nach dem Klick geändert bleibt: m.W. nein.

Naja, es gibt noch :focus.

Edit: Aber grundsätzlich hast du recht: persistent bekommt man das nicht.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Naja, es gibt noch :focus.

Und das hattest du in deiner Antwort vergessen.

LLAP 🖖

[Gunnar Bittersmann]

@@MudGuard

Wenn der Link gar nicht auf eine andere Seite oder eine andere Stelle derselben Seite verlinkt, sondern nur eine andersartige Aktion in derselben Seite bewirken soll, wäre vermutlich ein button besser geeignet.

s/wäre vermutlich/ist

href="#" ist ein sicheres Zeichen, dass es ein <button> sein sollte.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

man weiß es nicht. Das # könnte auch einfach ein Symbol für das eigentliche Link-Target sein.

Rolf

[Gunnar Bittersmann]

@@Rolf B

man weiß es nicht. Das # könnte auch einfach ein Symbol für das eigentliche Link-Target sein.

Nein. Dann macht das gewünschte Feature ja keinen Sinn.

Wenn man einen Link clickt, lädt der Browser die neue Seite ins Browserfenster. Da gibt’s nichts mehr zu sehen, was sich auf der alten Seite ändert.

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

man weiß es nicht. Das # könnte auch einfach ein Symbol für das eigentliche Link-Target sein.

Nein. Dann macht das gewünschte Feature ja keinen Sinn.

Wenn man einen Link clickt, lädt der Browser die neue Seite ins Browserfenster. Da gibt’s nichts mehr zu sehen, was sich auf der alten Seite ändert.

Links auf Anker sind immer noch verfügbar.

LG,
CK

[Gunnar Bittersmann]

@@Michael_K

Wie du der Diskussion entnehmen konntest, brauchen wir eine genauere Beschreibung dessen, was du da vorhast.

LLAP 🖖

[Michael_K]

Hallo Gunner & Co,

vielen Dank für die Antworten. Es ist in der Tat so, dass ich nach einer persistenten Interaktion suche. Das Ganze ist der Tatsache geschuldet, dass JavaScript nicht benutzt werden darf.

Nach den Hinweisen hier, könnte es in der Tat mit button:focus funktionieren. Hier mal ein Beispiel:

https://jsfiddle.net/1kx59n38/2/

Sind noch andere Möglichkeiten denkbar?

[Matthias Apsel]

Hallo Michael_K,

was willst du wirklich erreichen? Handelt es sich um eine Anwendung oder nur eine Spielerei?

Bis demnächst
Matthias

[Michael_K]

Wieso Spielerei?

Es ist doch eigentlich klar. Wenn ich auf ein Element fokusiere bzw. drauf klicke, sollen die CSS-Eigenschaften von einem anderen Element, dass nicht ein Unterelement ist, geaendert werden. Das ist keine Spielerei, oder wie wuerdest du es denn umsetzen, wenn kein Javascript zur Verfuegung steht?

Gruss

[Tabellenkalk]

Hallo,

Wieso Spielerei?

wenn kein Javascript zur Verfuegung steht?

Damit beantwortest du eigentlich selbst die Frage!

Generell ist css für die Darstellung gedacht, während Javascript für „Spielerei“ im Sinne von Aktionen/Änderungen also für das Verhalten der Seite gedacht ist.

Die bisherigen Antworten zeigen im Prinzip Ausnahmen dieser Regel .

Gruß
Kalk

[Gunnar Bittersmann]

@@Michael_K

Es ist doch eigentlich klar.

Nein.

Wenn ich auf ein Element fokusiere bzw. drauf klicke, sollen die CSS-Eigenschaften von einem anderen Element, dass nicht ein Unterelement ist, geaendert werden.

Die Frage, war nicht, was mit dem „einen“ oder „anderen Element“ geschehen soll, sondern was die Elemente für welche sind: welche Funktion sie haben, welchen Inhalt, …

wenn kein Javascript zur Verfuegung steht?

Warum nicht?

LLAP 🖖