CSS - Opprett et popup-vindu (ingen JavaScript)

Slik lager du en popup i CSS uten å bruke JavaScript

Bruk : svever for å bytte CSS når du beveger markøren.

Blant de endrede CSS-attributter, bruk skjermbildet: ingen å skjule / vise popupen, avhengig av posisjonen til markøren.

En popup med en lenke

Innholdet i popup-filen er plassert i en tag innenfor stikkord

Her er CSS-koden som skal legges i din html-fil eller i en egen CSS-fil:

 a.info {posisjon: relative; z-indeks: 24; background-color: #ddd; color: # 000; tekst-dekorasjon: none} a.info:hover {z-index: 25; bakgrunnsfarge: # ff0} a.info span {display: none} a.info:hover span {display: block; stilling: absolutt; top: 2em; venstre: 2em; bredde: 10em; grense: 1px solid # 0cf; background-color: # 555; farge: #fff; } 

HTML-koden som skal settes inn på websiden din:

 Voici un lien vers 

Resultatene:

Uten markør:

Med markør:

En popup uten kobling

Hvis du bare vil lage en popup uten noen kobling, kan du sette href = "#" i taggen din, men noen nettlesere mener at "#" er en kobling til toppen av siden.

For å motvirke dette, erstatt taggen med en kode (i HTML og CSS).

span.info

 {posisjon: relativ; z-indeks: 24; background-color: #ddd; color: # 000; markør: pointer; }