Heim > Web-Frontend > CSS-Tutorial > Wie erstelle ich anklickbare Divs ohne JavaScript?

Wie erstelle ich anklickbare Divs ohne JavaScript?

Linda Hamilton
Freigeben: 2024-11-10 10:02:02
Original
951 Leute haben es durchsucht

How to Create Clickable Divs Without JavaScript?

Anklickbare Divs ohne JavaScript

Das Erstellen eines anklickbaren Divs ohne JavaScript stellt eine Herausforderung dar, da Blockelemente wie Divs nicht in Inline-Elementen wie platziert werden können Anker. Um dies zu überwinden, besteht ein cleverer Ansatz darin, CSS zu verwenden, um die Illusion eines anklickbaren Div zu erzeugen.

Lösung mit CSS und HTML

  1. CSS:

    #my-div {
        background-color: #f00;
        width: 200px;
        height: 200px;
    }
    a.fill-div {
        display: block;
        height: 100%;
        width: 100%;
        text-decoration: none;
    }
    Nach dem Login kopieren

    Dieses CSS definiert ein Div mit fester Größe (#my-div) mit a roter Hintergrund. Es definiert auch ein Ankerelement (a.fill-div), das das gesamte Div einnimmt.

  2. HTML:

    <div>
    Nach dem Login kopieren

    The HTML erstellt ein Div mit der ID „my-div“ und ein darin enthaltenes Ankerelement mit der Klasse „fill-div“. Da das Ankerelement das gesamte Div einnimmt, wird durch Klicken auf eine beliebige Stelle im Div der href-Link des Ankers aktiviert.

Durch die Kombination dieser CSS- und HTML-Elemente können Sie ein ganzes Div anklickbar machen das Erscheinungsbild eines anklickbaren Div ohne die Verwendung von JavaScript.

Das obige ist der detaillierte Inhalt vonWie erstelle ich anklickbare Divs ohne JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage