CSS - Pop-up erstellen (kein JavaScript)

So erstellen Sie ein Popup in CSS, ohne JavaScript zu verwenden

Verwenden Sie : Hover, um CSS zu wechseln, wenn Sie den Cursor bewegen.

Verwenden Sie unter den geänderten CSS-Attributen display: none, um das Popup abhängig von der Position des Cursors auszublenden / anzuzeigen .

Ein Popup mit einem Link

Der Inhalt des Popups wird in a platziert tag innerhalb der Etikett

Hier ist der CSS-Code, der in Ihre HTML-Datei oder in eine separate CSS-Datei eingefügt werden soll:

 a.info {Position: relativ; z-Index: 24; Hintergrundfarbe: #ddd; Farbe: # 000; Textdekoration: keine} a.info:hover {Z-Index: 25; Hintergrundfarbe: # ff0} a.info span {display: none} a.info:hover span {display: block; Position: absolut; oben: 2em; links: 2em; Breite: 10em; Rand: 1px durchgehend # 0cf; Hintergrundfarbe: # 555; Farbe: #fff; } 

Der HTML-Code, der in Ihre Webseite eingefügt werden soll:

 Voici un lien vers 

Die Ergebnisse:

Ohne Cursor:

Mit Cursor:

Ein Popup ohne Link

Wenn Sie nur ein Popup ohne Link erstellen möchten, können Sie href = "#" in Ihr Tag einfügen. Einige Browser sind jedoch der Meinung, dass "#" ein Link zum oberen Seitenrand ist.

Um dem entgegenzuwirken, ersetzen Sie das Tag durch ein Tag (in HTML und CSS).

span.info

 {Position: relativ; z-Index: 24; Hintergrundfarbe: #ddd; Farbe: # 000; Cursor: Zeiger; }