:hover
Misol
Sichqonchani havola ustiga olib borganingizda uni tanlang va unga uslub bering:
a:hover {
background-color: yellow;
font-size: 18px;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
CSS :hover psevdo-klassi sichqonchani elementlar ustiga olib borganingizda ularni tanlash uchun ishlatiladi.
Maslahat: :hover psevdo-klassini faqat havolalarda emas, barcha elementlarda ishlatish mumkin.
Maslahat: Tashrif buyurilmagan sahifalarga havolalarga uslub berish uchun :linkdan, tashrif buyurilgan sahifalarga havolalarga uslub berish uchun :visiteddan va faol havolaga uslub berish uchun :activedan foydalaning.
Eslatma: CSS ta’rifida :hover samarali ishlashi uchun :link va :visited dan (agar ular mavjud bo‘lsa) KEYIN kelishi SHART!
| Versiya: | CSS1 |
|---|
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar psevdo-klassni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Psevdo-klass | |||||
|---|---|---|---|---|---|
| :hover | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
CSS sintaksisi
Ko‘proq misollar
Misol
Sichqonchani <p>, <h1> va <a> elementi ustiga olib borganingizda uni tanlang va unga uslub bering:
p:hover, h1:hover, a:hover {
background-color: yellow;
}
O‘zingiz sinab ko‘ring »
Misol
Tashrif buyurilmagan, tashrif buyurilgan, hover va faol havolalarni tanlang va ularga uslub bering:
/* 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;
}
O‘zingiz sinab ko‘ring »
Misol
Havolalarga turli uslublar bering:
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
O‘zingiz sinab ko‘ring »
Misol
<div> elementini (tooltip kabi) ko‘rsatish uchun sichqonchani <span> elementi ustiga olib boring:
div {
display: none;
}
span:hover + div {
display: block;
}
O‘zingiz sinab ko‘ring »
Misol
Sichqoncha ustiga olib borilganda "dropdown" menyuni ko‘rsating va yashiring:
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;}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS havolalar
CSS darsligi: CSS psevdo-klasslar
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!