CSS - Crea un pop-up (senza JavaScript)

Ecco come creare un popup in CSS, senza usare JavaScript

Usa : passa con il mouse per cambiare CSS quando sposti il ​​cursore.

Tra gli attributi CSS modificati, usa display: none per nascondere / mostrare il popup, a seconda della posizione del cursore.

Un popup con un link

Il contenuto del popup è inserito in a tag all'interno del etichetta

Ecco il codice CSS da aggiungere nel file html o in un file CSS separato:

 a.info {position: relativo; z-index: 24; background-color: #ddd; color: # 000; text-decoration: none} a.info:hover {z-index: 25; background-color: # ff0} span a.info {display: none} a.info:hover span {display: block; position: absolute; top: 2em; a sinistra: 2em; larghezza: 10em; border: 1px solid # 0cf; background-color: # 555; color: #fff; } 

Il codice HTML da inserire nella tua pagina web:

 Voici un lien contro 

I risultati:

Senza cursore:

Con il cursore:

Un popup senza collegamento

Se vuoi solo creare un popup senza link, puoi inserire href = "#" nel tuo tag, ma alcuni browser considerano che "#" è un collegamento alla parte superiore della pagina.

Per contrastare questo, sostituisci il tag con un tag (in HTML e CSS).

span.info

 {posizione: relativa; z-index: 24; background-color: #ddd; color: # 000; cursore: puntatore; }