CSS :hover ပုံစံအပြင်အသတ်ပုံ

အသုံးပြုခြင်း နှင့် ပုံစံ

CSS :hover ပုံစံအပြင်အသတ်ပုံများ ကျယ်ပြန့်စာကြိုးခြင်းအချိန်၌ အစိတ်အပိုင်းများကို ရယူရန် အသုံးပြုခြင်း:

အကြိုးစားအချက်::hover ပုံစံအပြင်အသတ်ပုံများ အစိတ်အပိုင်းများ၏ ပုံစံကို အသုံးပြုနိုင်သည်များများ ဖြစ်ပါသည်။

အကြိုးစားအချက်:အသုံးပြုပါ: :link လုပ်ဆောင်နိုင်သော်လည်း ထိုပုံစံကို သတ်မှတ်ခြင်း: :visited ထို့နောက် ထိုပုံစံကို သတ်မှတ်ခြင်း: :active လျှပ်ချမ်းသားဆိုင်ရာ လိုင်းတိုက်များ၏ စနစ်ကို သတ်မှတ်ခြင်း:

ကိုးကွယ်ချက်:CSS ကို သတ်မှတ်ခြင်းတွင်:hover လိုအပ်သည် :link နှင့် :visitedတောင်မှာ လုပ်ဆောင်နိုင်သော်လည်း!

အကျိုးသတ္တု

အမှတ် 1

ကျယ်ပြန့်စာကြိုးခြင်းအချိန်၌ လိုင်းတိုက်များ၏ စနစ်ကို အသုံးပြုခြင်းနှင့် သတ်မှတ်ခြင်း:

a:hover {
  background-color: yellow;
  font-size: 18px;
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အမှတ် 2

ကျယ်ပြန့်စာကြိုးခြင်းအချိန်၌ <p>、<h1> နှင့် <a> အစိတ်အပိုင်းများ၏ စနစ်ကို အသုံးပြုခြင်းနှင့် သတ်မှတ်ခြင်း:

p:hover, h1:hover, a:hover {
  background-color: yellow;
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အကြောင်း 3

မျဉ်းတွင် လွှတ်တင် ကို ဖွဲ့စည်းပြီး ပြောင်းလဲ

/* မဖတ်သေးသော လွှတ်တင် */
a:link {
  color: green;
}
/* ဖတ်သော လွှတ်တင် */
a:visited {
  color: green;
}
/* လှိုက်ခတ်သော လွှတ်တင် */
a:hover {
  color: red;
}
/* လုပ်ဆောင်နေသော လွှတ်တင် */
a:active {
  color: yellow;
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အကြောင်း 4

လွှတ်တင် လွှတ်တင် ပြောင်းလဲ

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အကြောင်း 3

span အရာအုပ် ပေါ်မှ ကြည့်ပါ အမှတ် 4 အကြောင်း

div {
  display: none;
}
span:hover + div {
  display: block;
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အကြောင်း 5

အမှတ် 6 အကြောင်း

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;}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

စီအီးအို ပြောင်းလဲ

:hover {
  စီအီးအို အမှုန်;
}

နည်းပါးလုံး

ဘရပ်လာ အထောက်အပံ့

အချက်အလက် အချက်အလက် သင်္ကေတသို့ အပြည့်အဝင် ကူညီပေးသော ဘရပ်လာသည် ကို အချက်အလက် အရာရှိ အားဖြင့် အသိအမှတ်ပြုထားသည်。

ပါဝင်သော စာမျက်နှာ

ပရိုဂရမ်:စီအီးအို လွှတ်တင်

ပရိုဂရမ်:စီအီးအို ပြောင်းလဲ