Hover дээр курсорыг хэрхэн өөрчлөх вэ

Агуулгын хүснэгт:

Hover дээр курсорыг хэрхэн өөрчлөх вэ
Hover дээр курсорыг хэрхэн өөрчлөх вэ

Видео: Hover дээр курсорыг хэрхэн өөрчлөх вэ

Видео: Hover дээр курсорыг хэрхэн өөрчлөх вэ
Видео: Минск мотоциклийн шүүрч авах тагийг цутгах 2024, May
Anonim

Вэб хуудасны зарим элементүүд хулганаа зөөж байхдаа гадаад төрхийг өөрчилдөг - энэ нь анхдагчаар HTML хэлний тохиргоогоор тэдэнд зориулагдсан байдаг (HyperText Markup Language - "Hypertext Markup Language"). Энэ хэл нь бусад хуудасны элементүүдийн ижил тохиргоог өөрчлөх боломжийг олгодог хэрэгслүүдтэй. Шаардлагатай бол та энэ зорилгоор CSS (Cascading Style Sheets) болон клиент талын JavaScript скрипт хэлийг хоёуланг нь ашиглаж болно.

Hover дээр курсорыг хэрхэн өөрчлөх вэ
Hover дээр курсорыг хэрхэн өөрчлөх вэ

Зааварчилгаа

1-р алхам

Style атрибутыг ашиглан сонирхсон вэб хуудасны объектын курсорын хувьсагчийг тохируулах боломжтой болно. Жишээлбэл, зочдын хөтөч дээр холбоос дээгүүр гүйж байхтай адил курсорын дүр төрхийг өөрчлөхийг зааж өгсөн оролтын текст талбарын HTML кодыг дараах байдлаар бичиж болно.

Алхам 2

Курсорын параметрийн хүчин төгөлдөр утгуудын жагсаалтаас хүссэн курсорыг сонгоно уу. Өмнөх алхам дээр үзүүлсэн жишээнд заагчийн утгыг ашигласан бөгөөд гарын утга нь яг ижил нөлөөтэй байна. Эдгээр хоёр утгаас гадна курсорыг харуулах дараахь хувилбаруудыг өгсөн болно: crosshair, e-resize, help, move, n-resize, ne-resize, nw-resize, progress, s-resize, se-resize., sw-хэмжээг өөрчлөх, текст бичих, w-хэмжээг өөрчлөх, хүлээх. Жишээлбэл, дээрх кодын загвар дээр курсорыг зүүн дээдээс баруун доод тийш хоёр толгойтой сум шиг харагдуулахын тулд заагчийн оронд nw-resize ашиглана уу.

Хэмжээ өөрчлөгдсөний өмнөх үсгүүд нь сумыг энэ утгаар аль чиглэлд чиглүүлж байгааг тодорхойлоход тусалдаг - тэдгээр нь луужин шиг гол цэгүүдийн тэмдэглэгээтэй тохирч байдаг. Жишээлбэл, nw нь баруун хойд (баруун хойд), s өмнөд (өмнөд) гэх мэт.

Алхам 3

Хэрэв та өөрийн курсорын дүрсийг төрөлхийн хэлбэрээр нь байршуулсан бол урьдчилан тодорхойлсон утгын оронд файлын URL-г ашиглана уу. Үүнийг хийхийн тулд дараахь синтаксийг ашиглана уу.

<input style = "курсор: url (https://someSite.ru/someCursor.cur) "/>

Хэрэв файл нь хуудастай нэг хавтсанд эсвэл дэд хавтас дотор байгаа бол үнэмлэхүй хаягийн оронд харьцангуй хавтас зааж өгч болно.

Алхам 4

Хэрэв та JavaScript ашиглан курсорын дүр төрхийг өөрчлөхийг хүсвэл onmouseover шинж чанарыг ашиглаарай. Жишээлбэл:

Энэ код нь хоёр дахь алхам дээрх жишээтэй яг ижил ажиллах болно.

Зөвлөмж болгож буй: