He tino paatai nga hononga ki nga wharangi tukutuku, engari he maha nga kaihoahoa tukutuku kaore i te mohio ki te mana kei a ratou ki te CSS hei whakamahi me te whakahaere i o raatau hononga. Ka taea e koe te tautuhi i nga hononga ki te torotoro, ki te pupuhi, me nga tau kaha. Ka taea hoki e koe te mahi me nga rohe me nga papamuri ki te tuku atu i to hononga ki te pizzaz, ki te hanga kia rite ki nga pati me nga whakaahua.
Ko te nuinga o nga kaihoahoa tukutuku e tīmata ana ma te tautuhi i te kāhua i runga i te tūtohu "a":
he {tae: whero; }Ka taatai tenei i nga waahanga katoa o te hono (hover, visit, and active). Ki te tuhi i nga waahanga takitahi, me whakamahi koe i nga pseudo-classes.
Hononga Pete-Katoa
E wha nga momo momo hononga pseudo-akomanga ka taea e koe te tautuhi:
- : hono - koinei te momo taunoa mo te hononga
- : i tae mai - i muri i te panui o te hononga
- : hover - ka rite te kiore ki runga i te hononga (i mua i te patene)
- : te mahi - tika rite te hono i te hono
Hei tautuhi i tetahi pseudo-papa hono, whakamahia ki te tohu i to ohanga CSS . Na, ki te huri i te tae tae mai o nga hononga katoa ki te hina, tuhia:
a: i tae mai [tae: hina; }Mena kei te whakariterite koe i tetahi pseudo-class, he pai te whakaaro ki te hanga i nga mea katoa. I taua ara ka kore koe e miharo ki nga hua kaore. Na, mehemea ka hiahia koe ki te whakarereke i te tae kua tae mai ki te hina, i te mea he pango nga pseudo-katoa o o hononga, ka tuhi koe:
a: hono, a: hover, a: kaha {tae: pango; } a: i tae mai [tae: hina; }Huria nga Tae Hononga
Ko te huarahi tino rongonui ki nga hononga kāhua ko te huri i te tae ka hurihia e te kiore:
he {tae: # 00f; } a: hover {color: # 0f0; }Engari kaua e wareware ka taea e koe te pa ki te pehea o te hono ki te hono i runga i taua mea me te:
he {tae: # 00f; } a: kaha {color: # f00; }Ka pehea ranei te hono o te hononga i muri i to ka tirotirohia e koe:
he {tae: # 00f; } a: i tae mai [tae: # f0f; }Hei whakauru katoa:
he {tae: # 00f; } a: i tae mai [tae: # f0f; } a: hover {color: # 0f0; } a: kaha {color: # f00; }Whakamahia nga Papamuri kei runga i nga Hononga ki te Whakauru I nga Ataata ranei
Ka taea e koe te whakaatu i tetahi papamuri i runga i te hononga ano kei roto i te tuhinga Papamuri Papanga, engari na te takaro me te papamuri he iti, ka taea e koe te hanga he hononga e whai ana i tetahi atarangi e whai ana. Kōwhiria tētahi ataata iti, kei te 15px te 15px, ki te kore e nui ake to kuputuhi. Tuhia te papamuri ki tetahi taha o te hononga me te tautuhi i te kōwhiringa whakautu ki te kore-ano. Na, tohaina te hono kia pai ai te neke o te kuputuhi i roto i te hononga ki te taha maui, ki te taha matau ranei, kia kite i te ata.
he [padding: 0 2px 1px 15px; te papamuri: #fff url (ball.gif) pokapū-kore-kore; tae: # c00; }Ina whiwhi koe i to tohu, ka taea e koe te whakaturia tetahi ahua rereke kia rite ki to pikitia, whakahoahoa, me te torotoro ki te huri i te hono:
he [padding: 0 2px 1px 15px; te papamuri: #fff url (ball.gif) pokapū-kore-kore; tae: # c00; } a: hover {papamuri: #fff url (ball2.gif) pokapū maui-kore-kore; } a: kaha [background: #fff url (ball3.gif) pokapū whakawhitinga kore-kore; }Whakaritehia o Ta Hononga Kia Patohia
He tino rongonui nga pātene, engari kia tae mai ra ano te CSS, me hangaia e koe nga paatene ma te whakamahi i nga whakaahua , ka nui ake te roa o o rarangi pepa. He waimarie, he mahinga rohe e taea te awhina ia koe ki te hanga i tetahi pātene-pānga ki te CSS.
he rohe: 4px tīmatanga; taraiha: 2px; whakapaipai kuputuhi: kahore; } a: kaha [rohe: 4px whakauru; }Kia mahara, ka whakauru koe i nga tae ki nga ahuatanga o te timatanga me nga momo putea, kaore pea nga kaiwhakarato e tuku kia rite ki ta koe e hiahia ana. Na, koinei te paati panui me nga rohe tae:
he tahua-taraiwa: pakari; whanui-whanui: 1px 4px 4px 1px; whakapaipai kuputuhi: kahore; te papaha: 4px; tae-tae: # 69f # 00f # 00f # 69f; }A ka taea e koe te pa ki nga momo hokene me te kaha o te hononga paatene, me whakamahi noa i aua pseudo-akomanga:
a: hono [te hanganga-a-ringa: te totoka; whanui-whanui: 1px 4px 4px 1px; whakapaipai kuputuhi: kahore; te papaha: 4px; tae-tae: # 69f # 00f # 00f # 69f; } a: hover {tae-rohe: #ccc; }