Hover auf dem Handy erstellen

  • Hallöchen,


    ich brauche eure Hilfe!


    Kurz vorweg:

    Und zwar bin ich gerade dabei meine Website für einen Shop von Handmadekleidung zu erstellen.

    Ich bin Mediengestalterin, habe also Grundkenntnisse von Html, css und co aber bei nem Shopsystem bin ich überfragt, weswegen ich diesen über Shopify hoste und drittanbieterapps für bestimmtes nutze.


    so nun geht es darum, dass ich eine Drittanbieterapp dazu nutze, dass mir Imageswatches auf meinen Produktseiten die Stoffauswahl anzeigt. Soweit so gut. Nun habe ich für den Desktop die Vorgaben der App so überarbeitet, dass die Imageswatches über einen Hoher vergrößert werden. klappt auch ganz gut soweit!


    Nun zur frage!

    Ich würde das selbe gerne am Handy haben, sprich, dass sich die Imageswatches durch gedrückt halten vergrößern und sobald ich loslasse in die Ausgangsgröße zurück gehen. Aktuell bleibt die Vergrößerung nämlich durch den klick und löst sich erst auf, wenn ich woanders hin klicke.


    Könnt ihr mir hier helfen?


    Hier wäre mein bearbeiteter Code für die Vergrößerung!

    Leider habe ich auf den Originalcode keinen zugriff, weswegen ich nur überschreiben kann!


    #bcpo .bcpo-colors div.bcpo-color-parent:hover,

    #bcpo .bcpo-images div.bcpo-image-parent:hover {

    transform:scale(2);z-index: 1; transition:0.5s;

    }


    alles Liebe Lena

  • Ich denke mal das dir das weiter helfen kann

    https://www.mediaevent.de/javascript/touch-events.html


    Das hover und mouse events nicht klappen ist ja logisch.

    Deswegen würde ich touch events nutzen.

    Zb , das Element anklicken ( dann wird es groß ) und sobald du den Finger von den Bildschrim nimmst wird es wieder klein.

    Für Handy gibt es so einige Events die dir weiter helfen könnte.

    Uns wer weiß, vieleicht kann die nächte Handy Generation auch hover erkennen ( zb Finger ist 1 cm über den Bildschirm ).

  • danke! Aber die Seite kenne ich schon und egal wie ich das Touchevent angelegt habe, nichts hat geklappt. Hab schon gefühlt 100 Varianten aus verschiedenen Foren durchprobiert. Alles was Google so ausgespuckt hat, aber entweder bin ich zu doof oder keine ahnung 🤦‍♀️🤷‍♀️

  • Dann probiere mal dieses:

    https://webentwicklung.ulrichbangert.de/hover.html

    Ich habe zusätzlich das Bild etwas nach links oben verschoben, weil es sonst vom Finger bedeckt ist.