Interaktiv psevdoklasslar
Interaktiv psevdo-klasslar
Interaktiv psevdo-klasslar elementlar bilan foydalanuvchi o‘zaro ta’siriga qarab uslublar qo‘llaydi.
Bu yerda :hover psevdo-klassini va :focus psevdo-klassini ishlatamiz:
Mouse Over Me
Havolalarda ishlatiladigan psevdo-klasslar
HTML havolalari uchun quyidagi psevdo-klasslardan foydalanish keng tarqalgan:
:link- Styles unvisited links:visited- Styles visited links:hover- sichqoncha ustiga olib borilganda havolaga stil beradi:active- Styles an activated link
Misol
Havolalarni holatiga qarab turli ranglarda ko‘rsatish:
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited
link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
O‘zingiz sinab ko‘ring »
Eslatma: a:hover samarali bo‘lishi uchun CSS ta’rifida a:link va a:visited dan KEYIN kelishi SHART! a:active samarali bo‘lishi uchun CSS ta’rifida a:hover dan KEYIN kelishi SHART! Psevdo-klass nomlari katta-kichik harfga sezgir emas.
<div> elementida :hover
Bu <div> elementida :hover psevdo-klassidan foydalanish misoli:
<input> elementida :focus
Bu :focus psevdo-klassidan input maydoni fokus olganda uni uslublash uchun foydalanish misoli:
Psevdo-klasslar va HTML klasslari
Psevdo-klasslarni HTML klasslari bilan oson birlashtirish mumkin:
Misol
"highlight" klassiga ega <a> elementiga :hover psevdo-klassini qo‘shing:
a.highlight:hover {
color: #ff0000;
}
O‘zingiz sinab ko‘ring »
Oddiy tooltip hover
<p> elementini (tooltip kabi) ko‘rsatish uchun sichqonchani <div> elementi ustiga olib boring:
Tada! Here I am!
Misol
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!