Ерөнхийдөө вэбсайт дээрх график сумнууд нь навигацийг зохион байгуулахад ашиглагддаг. Ийм заагчийг дарахад та өөр хуудас эсвэл тухайн хуудасны өөр хэсэгт очно уу. Заримдаа зарим үйлдлүүд нь тэдгээртэй холбоотой байдаг - шошго талбайн агуулгыг тодруулах, JavaScript скрипт ажиллуулах гэх мэт. Энэ сум нь идэвхтэй элемент гэдгийг онцлохын тулд "тодруулах" эффектийг ашиглаарай, i.e. хулгана дээр харагдах байдлын өөрчлөлт.
Шаардлагатай
HTML ба CSS хэлний анхан шатны мэдлэг
Зааварчилгаа
1-р алхам
Сумыг тодруулах ажлыг хэрэгжүүлэх аль механизм нь танд хамгийн тохиромжтой болохыг тодорхойл. Тэдгээрийн хэд нь байдаг бөгөөд хоёр энгийн зааврыг энэхүү зааврын дараагийн алхамуудад өгсөн болно. Тэд хоёулаа CSS hover псевдо ангиллыг ашигладаг. Хулганы курсорыг график элемент (сум) дээр дарахад энэ хуурамч ангид тайлбарласан хэв маягийг хэрэглэнэ, үлдсэн хугацаанд энэ хэв маяг идэвхгүй болно. Доор тайлбарласан хоёр хувилбарын хувьд та ижил HTML ашиглаж болно. код, гэхдээ өөр хэв маягийн тодорхойлолт. Хуудасны эх сурвалж дахь сумны кодыг дараах байдлаар бичиж болно: id шинж чанар нь холбоос танигчийг (arrowA) тодорхойлдог бөгөөд үүгээр хөтөч нь загварын тодорхойлолтыг аль нь хэрэглэхийг тодорхойлно.
Алхам 2
Эхний сонголт нь арын гэрэлтүүлэгтэй, гэрэлтүүлэгтэй биш хоёр сумны зураг бэлтгэх шаардлагатай болно. ArrON.gif, arrOFF.
# сумA, # сумA: зочилсон {
дэлгэц: блок;
өндөр: 30px;
өргөн: 100px;
дэвсгэр: url (arrOFF.gif) давтахгүй;
хил: 0;
}
a # сумA: hover {
дэвсгэр: url (arrON.gif) давтахгүй;
хил: 0;
}
Эхний блок нь сумны хэмжээсийг агуулна (өндөр: 30px; өргөн: 100px;) - тэдгээрийг бэлтгэсэн сумны зургийн хэмжээсээр солино.
Алхам 3
Хоёрдахь сонголт нь зөвхөн нэг зургийн файлтай хамт нэвтрэх боломжийг олгодог. Та сумны хоёр зургийг хоёуланг нь байрлуулах хэрэгтэй. Та тэдгээрийг зэрэгцүүлэн байрлуулж болно, та нөгөөгөөсөө дээгүүр байрлуулж болно. Түүврийн код дээр тодруулсан сумыг идэвхгүй сумны доор байрлуулж файлыг та arr.
# сумA, # сумA: зочилсон {
дэлгэц: блок;
өргөн: 100px;
өндөр: 30px;
дэвсгэр: url (arr.gif) давтахгүй;
хил: 0;
}
a # сумA: hover {
дэвсгэр: url (arr.gif) давтахгүй 31px;
хил: 0;
}
Энд бас хэмжээгээ өөрчлөхөө бүү мартаарай.
