Chapter 13 — Hover, Focus, Group va Peer

---

13.1 Asosiy State Variantlari

Example

index.html
HTMLNusxalash
01<button class="bg-blue-500 hover:bg-blue-700 active:bg-blue-800 focus:ring-2 focus:ring-blue-300 disabled:opacity-50 text-white px-6 py-3 rounded-lg">
02  Yuborish
03</button>

13.2 group va peer

Example

index.html
HTMLNusxalash
01<div class="group p-4 border rounded-lg hover:bg-gray-50">
02  <h3 class="font-bold group-hover:text-blue-600">Sarlavha</h3>
03</div>

⚠️ Common Mistake
group klassini unutib, faqat bola elementga group-hover: yozish — bu holda hech narsa ishlamaydi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Tugma yarating: hover:bg-blue-700 active:bg-blue-800 disabled:opacity-50.

🟡 Exercise 2 — Medium

Task: group/group-hover yordamida karta yasang — karta hover bo'lganda ichidagi ikonka rangi o'zgarsin.

🔴 Exercise 3 — Hard

Task: Floating label forma yarating — peer va peer-focus:/peer-placeholder-shown: yordamida.

---

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<input class="peer" type="email">
02<p class="peer-focus:text-blue-500">Email</p>

Your Task: Bu kod ishlaydi. Endi tartibni almashtiring: <p> ni <input>dan OLDIN qo'ying. Nima bo'ladi?

<details> <summary>Solution</summary> `peer-focus:` endi ishlamaydi, chunki `peer` variantlari faqat `peer` klassidan KEYIN keladigan DOM elementlariga ta'sir qiladi. `<p>` `<input>`dan oldin bo'lsa, bog'lanish uzilishi kerak. </details>

---

📌 Chapter Summary

Oddiy state'lar (hover, focus, active) to'g'ridan-to'g'ri elementga qo'llanadi. group/group-hover — ota holatiga qarab bolani o'zgartirish uchun. peer/peer-focus — aka-uka elementlar orasidagi bog'liqlik uchun.

🎯 Key Takeaways

• group/peer — JavaScript'siz, faqat CSS orqali holat almashtirish
• DOM tartibi peer-* uchun muhim (faqat keyingi elementlarga ta'sir qiladi)
• disabled: — foydalanuvchi tajribasi uchun muhim vizual signal

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01hover:, focus:, active:, disabled:
02group + group-hover: (ota → bola)
03peer + peer-focus: (aka-uka → keyingi element)

---