CSS :hover Selector
ဥပမာ
၎င်းကို မောက်စ်ပေါ်တွင် မောက်စ်တင်သည့်အခါ လင့်ခ်တစ်ခုကို ရွေးချယ်ပြီး ပုံစံစတိုင်လ်လုပ်ပါ-
a:hover
{
background-color: yellow;
}
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
၎င်းတို့ကို :hoverမောက်စ်ပေါ်တွင် မောက်စ်တင်သောအခါ အစိတ်အပိုင်းများကို ရွေးရန် ရွေးချယ်ကိရိယာကို အသုံးပြုသည်။
အကြံပြုချက်- :hover ရွေးချယ်မှုအား လင့်ခ်များတွင်သာမက အစိတ်အပိုင်းအားလုံးတွင် အသုံးပြုနိုင်သည်။
အကြံပြုချက်- သွားရောက်လည်ပတ်ခဲ့သည့် စာမျက်နှာများသို့ စတိုင်လင့်ခ်များ ပြုလုပ်ရန် :link ရွေးချယ်မှု ကိရိယာကို အသုံးပြု ပါ၊ လည်ပတ်ခဲ့သည့် စာမျက်နှာများသို့ စတိုင်လင့်ခ်များဆီသို့ :သွားရောက်လည်ပတ် သော ရွေးချယ်မှုစနစ်နှင့် တက်ကြွသောလင့်ခ်ကို ပုံစံသတ်မှတ်ရန် :active ရွေးချယ်မှုစနစ်ကို အသုံးပြုပါ။
မှတ်ချက်- :hover သည် ထိရောက်စေရန်အတွက် CSS အဓိပ္ပါယ်ဖွင့်ဆိုချက်တွင် :link နှင့် :visited (၎င်းတို့ရှိနေပါက) နောက်မှလာရပါမည်။
| ဗားရှင်း- | CSS1 |
|---|
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ရွေးချယ်သူကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးပါသည်။
| Selector | |||||
|---|---|---|---|---|---|
| :hover | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
မှတ်ချက်- IE တွင် <a> ဒြပ်စင်မဟုတ်သော အခြားဒြပ်စင်များပေါ်တွင် အလုပ်လုပ်ရန် :hover ရွေးပေးရန်အတွက် <!DOCTYPE> ကို ကြေငြာရပါမည်။
CSS Syntax
:hover {
css declarations;
}
နောက်ထပ် ဥပမာများ
ဥပမာ
၎င်းကို မောက်စ်ပေါ်မှ မောက်စ်တင်သောအခါ <p>၊ <h1> နှင့် <a> element တစ်ခုကို ရွေးချယ်ပြီး ပုံစံစတိုင်လ်လုပ်ပါ။
p:hover, h1:hover, a:hover {
background-color: yellow;
}
ဥပမာ
မကြည့်ရသေးသော၊ ဝင်ကြည့်ဖူးသော၊ ပျစ်ပျစ်နှင့် အသက်ဝင်နေသော လင့်ခ်များကို ရွေးချယ်ပြီး ပုံစံစတိုင်လုပ်ပါ-
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
/* selected link */
a:active {
color: yellow;
}
ဥပမာ
မတူညီသောစတိုင်များဖြင့် စတိုင်လင့်ခ်များ
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
ဥပမာ
<div> ဒြပ်စင်ကိုပြသရန် <span> ဒြပ်စင်တစ်ခုပေါ်တွင် ရွှေ့ပါ (ကိရိယာအကြံပြုချက်ကဲ့သို့)။
div {
display: none;
}
span:hover + div {
display: block;
}
ဥပမာ
မောက်စ်ပေါ်မှ "ဆွဲချ" မီနူးကို ပြပြီး ဝှက်ပါ-
ul {
display: inline;
margin: 0;
padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
position: absolute;
width: 200px;
display: none;
}
ul li ul li {
background: #555;
display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS လင့်ခ် များ
CSS သင်ခန်းစာ- CSS Pseudo အတန်းများ