Әдетте веб-сайттардағы графикалық көрсеткілер навигацияны ұйымдастыру үшін қолданылады. Мұндай көрсеткішті басқанда, сіз басқа параққа немесе ағымдағы беттің басқа бөліміне өтесіз. Кейде кейбір әрекеттер оларға байланысты болады - тег өрісінің мазмұнын бөлектеу, JavaScript сценарийін іске қосу және т.б. Бұл көрсеткі белсенді элемент екенін баса көрсету үшін «бөлектеу» эффектісін қолданыңыз, яғни. тышқанның сыртқы түрінің өзгеруі.
Қажетті
HTML және CSS тілдерін білу
Нұсқаулық
1-қадам
Көрсеткіні бөлектеуді жүзеге асырудың қандай механизмі сіз үшін жақсы екенін анықтаңыз. Олардың бірнешеуі бар, екеуі қарапайым, осы нұсқаулықтың келесі кезеңдерінде келтірілген. Олардың екеуі де CSS hover псевдо-класын пайдаланады. Тінтуір курсоры графикалық элементтің (стрелка) үстінде болған кезде, оған осы псевдо-класста сипатталған стиль қолданылады, ал қалған уақытта бұл стиль белсенді болмайды. Төменде сипатталған екі нұсқа үшін де бір HTML-ді қолдануға болады код, бірақ әр түрлі стиль сипаттамалары. Парақ көзіндегі көрсеткі кодын келесідей жазуға болады: id атрибуты сілтеме идентификаторын (arrowA) анықтайды, оның көмегімен браузер оған стиль сипаттамаларының қайсысын қолдану керектігін анықтайды.
2-қадам
Бірінші нұсқа артқы жарықпен және жарықсыз екі стрелка суретін дайындауды қажет етеді. Оларды сәйкесінше arrON.
a # arrowA, a # arrowA: барған {
дисплей: блок;
биіктігі: 30px;
ені: 100px;
өң: url (arrOFF.gif) қайталанбайтын;
шекара: 0;
}
a # көрсеткіA: меңзер {
фон: url (arrON.gif) қайталанбайды;
шекара: 0;
}
Бірінші блокта көрсеткі өлшемдері бар (биіктігі: 30px; ені: 100px;) - оларды дайындалған көрсеткі кескіндерінің өлшемдерімен ауыстырыңыз.
3-қадам
Екінші нұсқа тек бір сурет файлымен өтуге мүмкіндік береді. Сіз оған жебенің екі суретін де орналастыруыңыз керек - ерекшеленген және белсенді емес. Сіз оларды қатар орналастыра аласыз, сіз бірінің үстіне бірін қоя аласыз. Үлгі кодында біз ерекшеленген көрсеткі белсенді емес біреуінің астына орналастырылған және файл сізге arr.
a # arrowA, a # arrowA: барған {
дисплей: блок;
ені: 100px;
биіктігі: 30px;
фон: url (arr.gif) қайталанбайды;
шекара: 0;
}
a # көрсеткіA: меңзер {
фон: url (arr.gif) қайталанбайтын 31px;
шекара: 0;
}
Мұнда да өлшемін өзгертуді ұмытпаңыз.
