Mission 13: Hover

เป้าหมายของ Mission นี้: ทำให้ CSS เปลี่ยนตอนเอาเมาส์ไปชี้ ด้วย :hover

:hover คือ pseudo-class

:hover ต่อท้าย selector เพื่อบอกว่า "กฎนี้ใช้เฉพาะตอนเมาส์อยู่เหนือ element นี้" — เป็นตัวอย่างของ pseudo-class (สถานะพิเศษของ element ที่ ไม่ได้มาจาก HTML attribute โดยตรง)

Demo

.card {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.card:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

สังเกตว่า .card:hover เป็นกฎ แยกต่างหาก จาก .card ไม่ใช่เขียนซ้อนข้างใน