CSS တွင် လင့်ခ်များ၏ အခြေအနေများ

အင်တာနက်ပေါ်ရှိ ဝက်ဘ်ဆိုက်အမျိုးမျိုးကို သင်လည်ပတ်ကြည့်ရှုစဉ် လင့်ခ်များသည် မျက်နှာပြင်ပေါ်ရှိ မောက်စ်ကို တင်ခြင်းအား တုံ့ပြန်သည်ကို သင်သတိထားမိမည်ဟု ကျွန်တော်ထင်ပါသည်။ လင့်ခ်များ၏ အခြေအနေအမျိုးမျိုးတွင် အပြုအမူများ သတ်မှတ်ပေးခြင်းဖြင့် ထိုကဲ့သို့သော သက်ရောက်မှုကို ရရှိနိုင်ပါသည်။

ဥပမာအားဖြင့်၊ ဤနည်းအတိုင်း - a:hover - လင့်ခ်ပေါ်သို့ မောက်စ်ကာဆာကို တင်ထားသော အခြေအနေကို ကျွန်ုပ်တို့ ဖမ်းယူနိုင်ပါသည်။ ထိုအချိန်တွင် ကျွန်ုပ်တို့သည် လင့်ခ်၏ အရောင်ကို ပြောင်းလဲခြင်း သို့မဟုတ် မျဉ်းသားခြင်းကို ဖယ်ရှားခြင်း/ထည့်သွင်းခြင်း ပြုလုပ်နိုင်ပါသည်။ :hover ဆောက်လုပ်ရေးကို pseudo-class ဟုခေါ်ပါသည်။ Pseudo-classes များသည် အခြေအနေအမျိုးမျိုးရှိ အစိတ်အပိုင်းများကို ဖမ်းယူခွင့်ပြုပါသည်။

:hover မှလွဲ၍ :link pseudo-classes များလည်းရှိပြီး၊ ၎င်းတို့သည် မလည်ပတ်ရသေးသော လင့်ခ်ကို ဖမ်းယူပြီး၊ :visited သည် လည်ပတ်ပြီးသား လင့်ခ်ကို ဖမ်းယူပါသည်။ ဝက်ဘ်ဆိုက်အချို့တွင် ၎င်းတို့ကို အသုံးပြုသူများအား မည်သည့်နေရာတွင် ရှိပြီးဖြစ်ပြီး မည်သည့်နေရာတွင် မရှိသေးသည်ကို ပြသရန် အသုံးပြုကြသည်။ :active pseudo-class လည်းရှိပြီး၊ ၎င်းသည် အောက်ပါအခြေအနေကို ဖမ်းယူပါသည်- မောက်စ်ဖြင့် အစိတ်အပိုင်းတစ်ခုကို နှိပ်ထားပြီး၊ သို့သော် လွှတ်မထားသေးပါ။

အောက်ပါဥပမာတွင်၊ :hover အခြေအနေရှိ လင့်ခ်အတွက် မျဉ်းသားခြင်းကို ဖယ်ရှားထားပြီး၊ :link အခြေအနေတွင် အနီရောင်ကို သတ်မှတ်ထားပြီး၊ :visited အခြေအနေတွင် - အစိမ်းရောင်၊ :active တွင် - အပြာရောင် ဖြစ်ပါသည်။ ရလဒ်အနေဖြင့်၊ စတင်တွင် လင့်ခ်သည် အနီရောင်ဖြစ်မည်၊ ထို့နောက် ၎င်းကို နှိပ်ပြီးနောက် - အစိမ်းရောင်၊ မောက်စ်ဖြင့် နှိပ်ထားပြီး လွှတ်မထားပါက - အပြာရောင်၊ မောက်စ်ဖြင့် တင်ထားပါက - မျဉ်းမသားဘဲ ဖြစ်လာမည်-

a:link {
	color: red;
}
a:visited {
	color: green;
}
a:hover {
	text-decoration: none;
}
a:active {
	color: blue;
}

<a href="#">link</a>