ในการแสดงองค์ประกอบเมื่อวางเมาส์ (Hover) ด้วย CSS โค้ดมีดังนี้ −
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> body{ margin:20px; padding:20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .hiddenText { display: none; } .hoverDiv:hover + .hiddenText { display: block; color: rgb(71, 0, 65); font-size: 22px; font-weight: bold; } </style> </head> <body> <h1>Display an Element on Hover Example</h1> <div class="hoverDiv" style="font-size: 18px;">Hover over me.</div> <div class="hiddenText">This text is shown by hovering on the above div</div> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
เมื่อวางเมาส์เหนือข้อความ "Hover over me" −
