CSS - Vytvořit vyskakovací okno (bez JavaScriptu)

Zde je návod, jak vytvořit vyskakovací okno v CSS, bez použití JavaScriptu

Použijte : hover pro přepnutí CSS při pohybu kurzoru.

Z upravených atributů CSS použijte zobrazení: žádný pro skrytí / zobrazení vyskakovacího okna v závislosti na poloze kurzoru.

Vyskakovací okno s odkazem

Obsah vyskakovacího okna je umístěn v značku uvnitř štítek

Zde je kód CSS, který chcete přidat do vašeho souboru html nebo do samostatného souboru CSS:

 a.info {pozice: relativní; z-index: 24; barva pozadí: #ddd; barva: # 000; text-decoration: none} a.info:hover {z-index: 25; background-color: # ff0} a.info span {zobrazit: žádné} a.info:hover span {zobrazit: blok; pozice: absolutní; nahoru: 2em; vlevo: 2em; width: 10em; ohraničení: 1px pevné # 0cf; barva pozadí: # 555; barva: #ff; } 

Kód HTML, který má být vložen na vaši webovou stránku:

 Voici un lien vers 

Výsledky:

Bez kurzoru:

S kurzorem:

Vyskakovací okno bez odkazu

Pokud chcete pouze vytvořit okno bez jakéhokoli odkazu, můžete do tagu put href = "#", ale některé prohlížeče považují "#" za odkaz na horní část stránky.

Chcete-li tomu zabránit, nahraďte značku tagem (v HTML a CSS).

span.info

 {pozice: relativní; z-index: 24; barva pozadí: #ddd; barva: # 000; kurzor: ukazatel; }