CSS - Bir pop-up oluştur (JavaScript yok)

İşte JavaScript kullanmadan, CSS’de pop-up oluştur

Kullan : İmleci hareket ettirirken CSS'yi değiştirmek için üzerine gelin .

Değiştirilmiş CSS özellikleri arasında imleci konumuna bağlı olarak, açılır pencereyi gizlemek / göstermek için display: none kullanın.

Bağlantı içeren bir açılır pencere

Pop-up’ın içeriği içindeki etiketi etiket

HTML dosyasına veya ayrı bir CSS dosyasına eklenecek CSS kodu:

 a.info {position: göreceli; Z-endeksi: 24; Arka plan renkli: #ddd; Renk: # 000; text-decoration: none} a.info:hover {z-index: 25; background-colour: # ff0} a.info span {display: none} a.info:hover span {display: block; konum: mutlak; En: 2em; Sol: 2em; en: 10em; sınır: 1px katı # 0cf; background-color: # 555; Renk: #fff; } 

Web sayfanıza eklenecek HTML kodu:

 CCMCommunauté Voisi un lien 

Sonuçlar:

İmleç olmadan:

İmleç ile:

Bağlantısız açılan pencere

Herhangi bir bağlantı içermeyen bir açılır pencere açmak istiyorsanız, etiketinize href = "#" etiketini kullanabilirsiniz, ancak bazı tarayıcılar "#" sayfasının en üstünde bir bağlantı olduğunu düşünür.

Buna karşı koymak için, etiketi bir etiketle değiştirin (HTML ve CSS'de).

span.info

 {position: göreceli; Z-endeksi: 24; Arka plan renkli: #ddd; Renk: # 000; imleç: işaretçi; }