CSS - สร้างป๊อปอัป (ไม่มี JavaScript)

ต่อไปนี้เป็นวิธีสร้างป๊อปอัปใน CSS โดยไม่ต้องใช้ JavaScript

ใช้ : เลื่อนเมาส์ เพื่อเปลี่ยน CSS เมื่อเลื่อนเคอร์เซอร์

ในบรรดาคุณลักษณะ CSS ที่แก้ไขให้ใช้ display: none เพื่อซ่อน / แสดงป๊อปอัพขึ้นอยู่กับตำแหน่งของเคอร์เซอร์

ป๊อปอัปที่มีลิงก์

เนื้อหาของป๊อปอัปนั้นอยู่ใน แท็กภายใน แท็ก

นี่คือโค้ด CSS ที่จะเพิ่มในไฟล์ html ของคุณหรือในไฟล์ CSS แยกต่างหาก:

 a.info {ตำแหน่ง: ญาติ; ดัชนี z: 24; สีพื้นหลัง: #ddd; color: # 000; การตกแต่งข้อความ: none} a.info:hover {z-index: 25; background-color: # ff0} a.info span {display: none} a.info:hover span {display: block; position: absolute; ด้านบน: 2em; ซ้าย: 2em; ความกว้าง: 10em; เส้นขอบ: 1px solid # 0cf; สีพื้นหลัง: # 555; สี: # fff; } 

รหัส HTML ที่จะแทรกในหน้าเว็บของคุณ:

 พูดคุยกับ 

ผลลัพธ์ที่ได้:

ไม่มีเคอร์เซอร์:

ด้วยเคอร์เซอร์:

ป๊อปอัปที่ไม่มีลิงก์

หากคุณต้องการสร้างป๊อปอัปโดยไม่มีลิงก์ใด ๆ คุณสามารถใส่ href = "#" ในแท็กของคุณ แต่เบราว์เซอร์บางตัวพิจารณาว่า "#" เป็นลิงก์ไปยังด้านบนของหน้า

หากต้องการโต้กลับให้แทนที่แท็กด้วยแท็ก (ใน HTML และ CSS)

span.info

 {ตำแหน่ง: ญาติ; ดัชนี z: 24; สีพื้นหลัง: #ddd; color: # 000; เคอร์เซอร์: ตัวชี้; }