Michael_K: Interaktion mit CSS

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

  1. 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

  2. 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

    1. 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

      1. @@Christian Kruse

        Naja, es gibt noch :focus.

        Und das hattest du in deiner Antwort vergessen.

        LLAP 🖖

        --
        „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
        „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

        —Marc-Uwe Kling
    2. @@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 🖖

      --
      „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
      „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

      —Marc-Uwe Kling
      1. Hallo Gunnar,

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

        Rolf

        --
        sumpsi - posui - clusi
        1. @@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 🖖

          --
          „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
          „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

          —Marc-Uwe Kling
          1. 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

  3. @@Michael_K

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

    LLAP 🖖

    --
    „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
    „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

    —Marc-Uwe Kling
    1. 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?

      1. Hallo Michael_K,

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

        Bis demnächst
        Matthias

        --
        Pantoffeltierchen haben keine Hobbys.
        ¯\_(ツ)_/¯
        1. 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

          1. 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

          2. @@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 🖖

            --
            „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
            „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

            —Marc-Uwe Kling