Contao Konferenz 2019 in Duisburg - Call for Papers
Ergebnis 1 bis 2 von 2

Thema: Hover-Effekte auf Touchscreen wie umsetzen?

  1. #1
    Contao-Fan
    Registriert seit
    12.10.2010.
    Beiträge
    687

    Standard Hover-Effekte auf Touchscreen wie umsetzen?

    Hi Leute,

    wie können Hover-Effekte auf Touchscreens umgesetzt werden?

    Hier ein paar Beispiele schöner Effekte
    https://tympanus.net/Development/Hov...eas/index.html

  2. #2
    Haupt-Administratorin der Contao-Foren
    Buchautorin 'Contao für Redakteure'
    Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Mecklenburg-Vorpommern
    Beiträge
    4.726
    Partner-ID
    11474
    User beschenken
    Wunschliste

    Standard

    Da es Hover im typischen Touch-Umfeld nicht gibt, muss der technische Aufbau geändert werden. Hier mal ein paar allgemeine Tipps zum Thema:

    • An vielen Stellen reicht es, wenn man einfach im CSS ergänzend noch alles korrekt für :focus eingibt.
    • Wenn es sich nicht um ein standardmäßig fokusierbares Element handelt, kann man das HTML-Element mit tabindex="0" noch in die normale Fokusreihenfolge aufnehmen
    • Ist Javascript im Einsatz, ändert man meist das hover-Event auf ein click-Event ab oder ergänzt es. Es hängt halt davon ab, um was für eine Situation es überhaupt geht.
    • Ggf. muss man noch per Javascript Klassen setzen. Wenn es um Fokusierung geht, stellt sich ja die Frage, was ist, wenn der Fokus weiterwandert. Im Beispiel könnte man den p-Text erscheinen (opacity 1) lassen, wenn der Fokus auf der figure-Fläche liegt. Was ist aber, wenn im Text ein Link ist und der Nutzer den Fokus darauf verschiebt? Da kommt man mit reinem CSS oft an die Grenzen und muss dann beispielsweise per JS eine Klasse setzen, die solange da bleibt, bis der Fokus sich aus dem ganzen figure (und seinen Inhalten) rausbewegt.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •