So erstellen Sie reines CSS onClick Image Zoom-Effekt

CSS hat keine Pseudoklasse für das Targeting von Klickereignissen, und dies ist einer der größten Schwachpunkte von Frontend-Entwicklern. Die am nächsten liegende Pseudoklasse ist :active die ein Element für den Zeitraum formatiert, in dem ein Benutzer seine Maus darüber hält.

Dieser Effekt ist jedoch von kurzer Dauer: Sobald der Benutzer die Maus loslässt, : :active funktioniert nicht mehr. Wir müssen eine andere Möglichkeit finden, das Klickereignis in CSS zu emulieren .

Dieser Post wurde als Reaktion auf die Anfrage eines Lesers geschrieben und erklärt, wie man das Click-Ereignis mit reinem CSS in einem bestimmten Anwendungsfall, dem Bild-Zoom, anvisieren kann .

Sie können das Endergebnis unten sehen - eine CSS-Lösung für Bildzoom bei Klick .

Wann sollte die CSS-Lösung verwendet werden?

Bevor ich fortfahre, möchte ich sagen, dass ich für den Bildzoom die CSS-only-Methode (die die Abmessungen des Bildes ändert) nur dann empfehle, wenn ein einzelnes oder eine Gruppe von wenigen Bildern die Zoom-Funktion haben soll.

Für eine korrekte Galerie bietet JavaScript mehr Flexibilität und Effizienz.

Front-End-Techniken, die wir verwenden werden

Nun, da Sie gewarnt wurden, lassen Sie uns schnell die drei wichtigsten Techniken betrachten, die wir verwenden werden:

1. Das
2. Das usemap Attribut des Tag, der das Bild an die Imagemap anschließt.
3. Die CSS-Pseudoklasse :target, die ein Element darstellt, das mit dem ID-Selektor angesprochen wurde.

1. Erstellen Sie die HTML-Basis

Lassen Sie uns zuerst die HTML-Basis erstellen. Im folgenden Code fügen wir ein Bild hinzu, das vergrößert und verkleinert werden soll, und schließen Schaltflächensymbole zum Vergrößern und Verkleinern.

Es ist wichtig, eine ID auf dem zu vergrößernden Bild zu haben, und die Schließen-Schaltfläche muss ein Link sein, der das Attribut href="#" hat. Ich werde später im Beitrag erklären, warum.

2. Fügen Sie das CSS hinzu

Anfangs sollte das Schließen-Symbol nicht angezeigt werden . Die Eigenschaften " position, " margin-, " left und " bottom platzieren die Symbole "Erweitern" und "Schließen" an der Stelle, an der sie sich befinden sollen - in der oberen rechten Ecke des Bildes.

Die pointer-events: none; Mit dieser Regel können Mausereignisse das Expand-Symbol passieren und das Bild erreichen .

 .img {Höhe: 150px; Breite: 200px; } .close {Hintergrundbild: URL ("Close-icon.png"); Hintergrund-Wiederholung: keine Wiederholung; unten: 418px; Anzeige: keine; Höhe: 32px; links: 462px; Rand oben: -32px; Position: relativ; Breite: 32px; } .expand {unten: 125px; Rand links: -32px; Rand rechts: 16px; Zeiger-Ereignisse: keine; Position: relativ; } 

3. Fügen Sie die Imagemap hinzu

In der Imagemap sollte der anklickbare Bereich in der oberen rechten Ecke des Bilds direkt unter dem Symbol "Expand" und in seiner Größe angezeigt werden. Setze das

Im Codeblock oben, der tag definiert die Form, Größe und den URI eines verknüpfbaren Bereichs innerhalb einer Imagemap . Bei einer rechteckigen Form nimmt das Attribut shape den rect Wert an, und die vier Werte des Attributs coords repräsentieren den Abstand in Pixel zwischen:

1. der linke Rand des Bildes und der linke Rand des Verknüpfungsbereichs
2. der obere Rand des Bildes und der obere Rand des Linkbereichs
3. der linke Rand des Bildes und der rechte Rand des Linkbereichs
4. die obere Kante des Bildes und die untere Kante des Linkbereichs

Der Wert des href Attributs muss der Hash-Bezeichner des Bildes sein (deshalb sollte das Bild eine id ).

4. Binden Sie das Bild an die Imagemap

Fügen usemap dem Bild das Attribut usemap, um es an die usemap zu binden . Sein Wert muss die Hash-Darstellung des Namensattributs des. Sein

 Wie funktioniert der Schließen-Button? 
Da die Schaltfläche Schließen als Hintergrundbild hinzugefügt wurde (Schritt 2) und tatsächlich ein Tag mit dem Attribut href=# (Schritt 1), wird beim Anklicken die Fragmentkennung vom Ende des URI entfernt. Daher entfernt es auch die Pseudo-Klasse :target aus dem Bild und das Bild wird auf seine vorherige Größe zurückgesetzt .
Jetzt ist der CSS-only-Zoom-on-click-Effekt fertig, sieh dir die Demo unten an, oder lies ein bisschen mehr über die Theorie hinter Image Maps im nächsten Abschnitt.
 Hintergrundinfo: Warum? 
Inzwischen wissen Sie sicherlich, dass das wichtigste Ziel für diese CSS-Lösung darin besteht, das Bild mit dem Attribut href="#imgid" könnte auch mithilfe des Tags anstelle der href="#imgid" erfolgen.
Dies kann wahr sein, aber wenn es um Bilder geht, verwenden Sie die 
Der default für das shape Attribut erstellt einen rechteckigen verknüpfbaren Bereich, der das gesamte Bild abdeckt . Wenn Sie stattdessen verwenden würden, müssten Sie es codieren, um das Bild abzudecken, und Sie müssen möglicherweise auch ein Wrapper-Element für den gleichen Zweck verwenden.
Um auch über die Vorbehalte dieser Lösung zu sprechen, wird die CSS-Eigenschaft pointer-events (die wir in Schritt 2 verwendet haben) von Internet Explorer erst ab Version 11 unterstützt .
Um IE-Browser vorher zu unterstützen, möchten Sie vielleicht statt dessen verwenden 







        

          
          

		  
20 coole und kreative Türstopper, die du kaufen kannst
            
Wenn es um Wohnkultur geht, ist es nicht so einfach, Dinge zu wählen, die sowohl schön als auch funktional für Ihr Haus oder Ihre Wohnung sind. Türstopper ist eine sehr nette und nützliche Sache, um zu verhindern, dass benachbarte Wände durch die Tür beschädigt werden oder die Tür offen bleibt. Sie kön
			
(Tech- und Design-Tipps)
          
        
      

        

          
          

		  
Finden und teilen Sie Tech Talks mit der Speakerex Community
            
Die Speakerdex-Site ist eine Ressource wie keine andere. Es kuratiert Hunderte von Tech-Gesprächen aus allen Bereichen wie Web-Entwicklung, UI-Design, Benutzererfahrung und künstliche Intelligenz.Die meisten dieser Videos werden direkt von den Organisatoren der Konferenz eingereicht, enthalten aber auch Beiträge von Rednern.Ke
			
(Tech- und Design-Tipps)