Klicken Sie durch Div auf zugrunde liegende Elemente - CSS

Klicken Sie durch Div auf zugrunde liegende Elemente - CSS
Entwickler können andere verschiedene Elemente unter einem DIV -Behälter verwenden. Angenommen, Sie möchten auf alle zugrunde liegenden Elemente klicken, die über die DIV zugegriffen werden können. Die meisten Entwickler haben schwerwiegende Probleme, da sie nur dann auf die zugrunde liegenden Elemente klicken können, wenn sie auf die Außenseite klicken, um die Überlagerung im DIV zu erhalten. Um eine solche Situation zu bewältigen, entscheiden Sie sich für die Möglichkeit, die erstellte DIV durchzuklicken.

In diesem Beitrag wird die Methode zum Klicken durch die DIV erläutert, um die Elemente in CSS zugrunde liegen.

So klicken Sie durch Div auf zugrunde liegende Elemente in CSS?

Erstellen Sie zunächst eine Hauptdiv mit einem bestimmten Namen und fügenElement zum Definieren des Hyperlinks, der zum Verknüpfen von einer Seite mit einer anderen verwendet wird. Fügen Sie dann ein "" -Tag nach demselben Prozedur ein und geben Sie einen Klassennamen an.

Schritt 1: Erstellen Sie einen DIV -Behälter

Nutzen Sie zuerst die “Element zum Erstellen eines Div -Containers in einer HTML -Datei. Geben Sie dann eine an “Ausweis”Im Eröffnungsetik„ Div “mit einem bestimmten Wert.

Schritt 2: Erstellen Sie einen verschachtelten Div -Container

Machen Sie als nächstes einen weiteren Div -Container im ersten Container, indem Sie demselben Verfahren folgen.

Schritt 3: Überschrift einfügen

Verwenden Sie danach das HTML -Überschriften -Tag, um eine Überschrift hinzuzufügen. In diesem Szenario die “

Das Überschriften -Tag wird verwendet.

Schritt 4: Fügen Sie ein Element für zugrunde liegende Elemente hinzu

Fügen Sie jetzt eine ein “Element, um eine Seite mit einer anderen zu verknüpfen. Um dies zu tun, fügen Sie das hinzu “href”Attribut im Tag" "" und setzen Sie den Wert dieses Attributs, um den Website -Link zuzuweisen:



Klick auf den Link


= "https: // linuxhint.com "> nicht reaktionsschnell



= "https: // linuxhint.com "> reaktionsschnell

Ausgang

Schritt 5: Style Main Div Container

Greifen Sie mit Hilfe des Attributauswählers auf die Hauptdiv zu und nennen Sie als “.Hauptinhalt”:

#Hauptinhalt
Rand: 30px 50px;
Grenze: 3px gepunktetes grün;
Polsterung: 20px 40px;
Hintergrundfarbe: RGB (207, 250, 207);

Wenden Sie nun die oben angegebenen CSS -Eigenschaften an:

  • Rand”Wird verwendet, um den Raum um die Grenze des Elements anzugeben.
  • Grenze”Bestimmt die Grenze außerhalb des definierten Elements.
  • Polsterung”Zuweist den Raum innerhalb der definierten Grenze.
  • Hintergrundfarbe”Eingesetzt, um die Farbe auf der Rückseite des Elements festzulegen.

Infolgedessen wird der Hauptbehälter wie folgt gestylt:

Schritt 6: Anwenden Sie die Eigenschaft "Zeiger-Events" an

Greifen Sie nun mit dem Klassennamen als "auf den verschachtelten Container zu" zu ".Wurzel”:

.Wurzel
Zeiger-Events: Keine;

Dann wenden Sie die “an“Zeiger-Events”Um die HTML -Komponenten zu verwalten, die auf Maus- und Berührungsereignisse reagieren. In diesem Szenario der Wert von “Zeiger-Events”Wird als" eingestellt "keiner”, Was bedeutet, dass das Element nicht auf Zeiger-Events reagiert:

Schritt 7: Greifen Sie auf die Kinderklasse zu

Zugang nun auf die “"Tag mit dem Klassennamen als".Kind”. Dann wenden Sie die “an“Zeiger-EventsEigenschaft und setzen Sie den Wert als "Auto”:

.Kind
Zeiger-Events: Auto;

Der "AutoDer Wert wird verwendet, um auf Zeigerereignisse wie Click zu reagieren.

Ausgang

Das dreht sich alles darum, durch Div auf zugrunde liegende Elemente in CSS zu klicken.

Abschluss

Klicken Sie durch Div zu den zugrunde liegenden Elementen, machen Sie zunächst einen Hauptdiv mit einem bestimmten Namen und fügen Sie ein Klassen- oder ID -Attribut hinzu. Dann fügen Sie die “ein“Element und fügen Sie das Klassenattribut als Kind hinzu. Danach greifen Sie auf die Div zu und wenden Sie die “anZeiger-Events”Mit dem Wert keine. Greifen Sie als Nächstes auf das untergeordnete Attribut zu und wenden Sie sich an “Zeiger-Events"Mit dem Wert"Auto”. Diese Beschreibung hat die Methode zum Klicken durch Div auf zugrunde liegende Elemente gezeigt.