CSS - hüpikakna loomine (JavaScript puudub)

Siin on, kuidas luua hüpikaknad CSS-is ilma JavaScripti kasutamata

Kasutage : hover, et lülitada CSS kursori liigutamisel sisse.

Muudetud CSS-atribuutide hulgast kasutage ekraani peitmiseks / kuvamiseks kursorit, sõltuvalt kursori asukohast.

Sildiga hüpik

Populaarse sisu sisu paigutatakse a sildi sees silt

Siin on CSS-kood, mida lisada oma html-failis või eraldi CSS-failis:

 a.info {asukoht: sugulane; z-indeks: 24; taustavärv: #ddd; värv: # 000; teksti kaunistus: puudub} a.info:hover {z-index: 25; taustavärv: # ff0} a.info span {display: none} a.info:hover span {display: block; positsioon: absoluutne; top: 2em; vasakule: 2em; laius: 10em; piir: 1px tahke # 0cf; taustavärv: # 555; värv: #fff; } 

Veebilehele lisatav HTML-kood:

Tulemused:

Ilma kursorita:

Kursoriga:

Lingi puudutav hüpik

Kui soovite lihtsalt hüpata ilma lingita, saate oma sildisse panna href = "#", kuid mõned brauserid leiavad, et "#" on link lehe ülaosale.

Selle vastu võitlemiseks asendage silt sildiga (HTML ja CSS).

span.info

 {positsioon: sugulane; z-indeks: 24; taustavärv: #ddd; värv: # 000; kursor: pointer; }