Klasse toggeln mit classList.toggle() funktioniert am Touchsreen nicht

Ich habe auf guggis-shoes.at/galerie.html einen Button am rechten Rand für eine Anfrage, der bei Desktopbildschirmen per hover hereinfährt.

Auf Touchscreens gibt es ja kein hover, daher mache ich das per JS indem ich per Klick auf den Warenkorb die Klasse "move" dazufüge, welche sich wie hover verhält.

<div id="anfrage">
        <i class="fa fa-shopping-basket fa-2x" onclick="doLink()"></i>
        <a href="anfrage.html" target="Anfrage">
            <p>Sende eine Anfrage, wir beraten dich gerne pers&ouml;nlich!</p>
        </a>
</div>

<script>
function doLink() {
    document.getElementById("anfrage").classList.toggle("move");
    }
</script>

<style>
#anfrage { display: flex; position: fixed; right: -120px; top: 330px; height: 100px;  width: 166px; z-index: 999;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
}

#anfrage:hover, #anfrage.move { right: -10px; }
#anfrage i { margin-left: 5px; }
#anfrage p { flex-grow: 1; flex-shrink: 1; flex-basis: auto; margin: 5px 10px 5px 5px; font-size: 13px;
    border-left: 1px solid #193e63; padding-left: 5px; }
#anfrage a { color: #193e63; text-decoration: none; }
#anfrage a:hover { color: #7fb4e8; }
</style>

Im Browser unter Web-Entwickler / Bildschirmgrößen testen funktioniert es problemlos bei den diversen Geräten: 1x klicken und der Button fährt heraus, nochmal klicken und der Button fährt durch toggle() wieder hinein. Auf echten Geräten (iPad, Samsung Galaxy, ...) fährt er zwar heraus, aber beim 2. Klick nicht mehr hinein.

Hat jemand eine Ahnung, wo das Problem liegt?

Hat leider nichts geändert!

Gibt es ev. andere Möglichkeiten, wie man am Touchbildschirm den hover Vorgang simulieren könnte?

Keine Änderung am iPad, Button fährt heraus aber nicht mehr hinein beim 2. Klick

Bei Firefox/Web-Entwickler/Bildschirmgrößen testen fährt bei deinen beiden Varianten der Button nicht mal mehr heraus, sobald ich den Event mitgebe, während der Button ohne Event sowohl heraus- alsauch hineinfährt

Hallo AndreasB,

genau das war es! Ich habe jetzt den Pseudo-Hover-Effekt mit Media Query am Touch Screen ausgeschaltet und damit kann ich den Button mit dem ersten Klick ausfahren und mit dem zweiten Klick wieder einfahren.

@media(hover: hover) and (pointer: fine) { #anfrage:hover { right: -10px; } }
#anfrage.move { right: -10px; }

Der restliche Code bleibt gleich.

Danke und LG