hover css การดักเหตุการณ์วางเมาส์ที่ Elements
บทความวันที่ 19 มีนาคม 2556
hover คือ คำสั่งในภาษา CSS ใช้ในกรณีที่ต้องการดักจับเหตุการณ์ ผู้ใช้งานวางเมาส์ไว้บน Elements ต่าง ๆ
ภาพรวมของ hover css
1. ใช้คำสั่ง hover ต่อท้าย div id หรือ class ที่ต้องการ เช่น #box:hover, .box:hover
2. สามารถใช้คำสั่ง hover ได้กับ Elements ชนิดต่าง ๆ เช่น div, link, text เป็นต้น
3. สามารถเขียนคำสั่งต่าง ๆ ที่ต้องการในเหตุการณ์ hover ได้
ตัวอย่างโปรแกรม
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<style>#box { width:100px; height:100px; background:#009900; border:#006600 1px solid; cursor:pointer;}#box:hover { background:#3399CC; border:#3366CC 1px solid; }</style><div id='box'></div> |
ผลลัพธ์
ก่อนวางเมาส์บน Element
หลังวางเมาส์บน Element
