• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

"Touchhintergrundfarbe" bei Buttons in mobilen Geräten

TheDarkBlueEvil

Neues Mitglied
Hi Leute,

erst einmal sorry für den Titel. Ein besser ist mir leider nicht eingefallen.
Mir ist aufgefallen das es Webseiten gibt, bei denen zum Beispiel der Hintergrund (oder besser gesagt die Fläche) des "Burgermenüs" bei Toucheingabe, kurz einen aktiven Hintergrund anzeigt. Verstärkt sieht man das, wenn das Burgermenü Transparent auf weißen Hintergrund ist. Ich hoffe ihr wisst was ich meine. Da es nicht bei allen Webseiten vorkommt, denke ich, dass es vielleicht am Framework liegen könnte. Konkret fällt es mir bei Seiten die mit Wordpress erstellt wurden vermehrt auf.

An was liegt das und gibt es eine Möglichkeit das abzustellen. Also kein Hintergrund bei Touchklick?
Ich habe einmal ein GIF davon erstellt (hoffentlich geht das hier). Konkret geht es um den kurzzeitigen blauen Hintergrund.


2021-12-04_07h26_24.gif
 

threadi

Moderator
Teammitglied
Moderator
Das dürfte durch die focus oder hover Pseudoklasse passieren.

Wenn Du ein konkretes Beispiel nennst wo das so ist, kann man dir den Quellcode dazu für diesen Fall sicherlich raussuchen.
 

TheDarkBlueEvil

Neues Mitglied
Hallo,

vielen Dank für deine Rückmeldung. Aktuell habe ich kein zugängliches Beispiel (läuft Lokal) was ich schnell einmal zeigen könnte. Wäre es möglich diese beiden Pseudoklassen via JQuery oder CSS einfach testweise zu deaktivieren?
 

threadi

Moderator
Teammitglied
Moderator
Du kannst sie per CSS überschreiben. Schau dir in der Entwicklerkonsole deines Browsers an welche Eigenschaft es ist.
 

TheDarkBlueEvil

Neues Mitglied
Hm... ich habe mir das mal angesehen und komme irgendwie nicht drauf. Ich habe nun eine Beispielseite erstellt. Hier ist gut zu sehen das es in der Desktop Einstellung keine Hintergrundfarbe bei Klick gibt, wohl aber in der mobilen Ansicht und auch am Handy. Getestet habe ich es mit dem Chrome Entwicklermodus in der mobilen Ansicht.

Hier der Link:
*****

Ich werde später den Zugang wieder deaktivieren.
 
Zuletzt bearbeitet:

threadi

Moderator
Teammitglied
Moderator
Bei der Seite kann ich den beschriebenen Effekt gar nicht nachvollziehen. Das Hamburger-Menü ist dort zudem nur eine Ansammlung von divs und kein echter Link.

Meine Vermutung ist gerade eher, dass diese blaue Markierung die man in deinem gif oben sehen kann die Textmarkierung ist - quasi die Auswahl des Elementes, welches den Hamburger repräsentiert. Wieso das bei dir am Mobilgerät passiert weiß ich nicht. Ist jedenfalls kein CSS-Effekt.
 

TheDarkBlueEvil

Neues Mitglied
Die Vermutung habe ich auch. Aber irgendwo muss doch der unterschied zwischen Desktop und Mobil herkommen oder? Wenn du im Chrome Entwicklermodus auf die Handyansicht umschaltest, ist der gleiche Effekt zu sehen.

Entwicklermodus.JPG
 

TheDarkBlueEvil

Neues Mitglied
Du hast gerade meinen Tag/Wochenende gerettet - DANKE. Das ist die Lösung die ich benötige.
Der Effekt tritt nun auf keinem Gerät und in keinem Browser mehr auf.

Das habe ich dazu eingebaut:

Lösung.JPG

Muss mal schauen ob ich das nicht gleich Global anstatt mit einer Class einbinde. Was meinst du dazu?
Wie würdest du das am besten einbinden. Der Effekt tritt eigentlich bei jeden Button, Link oder sonstigen klickbaren auf...

Eventuell könnte man den Titel dieses Beitrages anpassen...

LG
 
Werbung:
Oben