Ang Cascading Style Sheets (CSS) ay idinisenyo gamit ang o XML (kabilang ang XHTML, SVG) na format. Ito ay isang istilo ng style sheet na pangunahing ginagamit upang ilarawan ang mga elemento sa pamamagitan ng magkakaibang serye ng mga pamamaraan ng pag-format. Ang isa sa mga pamamaraan ay pag-hover at sa artikulong ito, mauunawaan namin ang Hover sa CSS sa sumusunod na pamamaraan:
- Ano ang Hover sa CSS?
- Saan Ginamit ang Hover?
- Ano ang ginagawa ni Hover?
- Pagkakatugma
- Paano ito gumagana?
- Palitan ang kulay ng Hover sa Background sa 'Pula'
- Lumilikha ng Hover Opacity sa Mga Larawan
- Lumilikha ng Overlay ng Teksto sa Mga Larawan
Ano ang Hover sa CSS?
Ang CSS hover ay isang sangkap ng selector na ginagamit upang mag-istilo ng iba't ibang mga elemento kapag ang mouse pointer ay lumilipat sa kanila. Maaari silang magamit sa halos bawat elemento ng HTML. Ang tampok na pag-hover sa CSS ay nagtataglay ng malaking kahalagahan sa pagdidisenyo ng web page.
Ang bahagi ng pag-hover ay maaaring i-highlight, i-encode at ipasadya ang mga web page ayon sa kagustuhan ng gumagamit sa isang compact at effectual na web-designing program.
Saan Ginamit ang Hover?
Ang pinakakaraniwang mga halimbawa ng kakayahang mabuhay ng tampok na hover ay maaaring ma-highlight sa pangunahing mga website sa pamimili tulad ng Flipkart at Amazon. Kapag ang mga gumagamit ay nag-hover sa anumang produkto sa mga website ng e-commerce ang produkto ay na-program upang maisagawa ang isang awtomatikong pag-andar ng zoom hover upang maibigay sa customer ang isang mas mahusay na pagtingin sa kanilang mga napiling produkto. Sa pamamagitan ng programang ito, ang web page ay idinisenyo upang ipakita ang isang compact view ng buong saklaw ng produkto na sinamahan ng isang detalyadong pagtingin sa produkto ng interes sa isang solong disenyo ng web page.
Ano ang ginagawa ni Hover?
Ang hover ay isang multi-functional tool tool sa pamamagitan ng kung saan ang gumagamit ay maaaring ipasadya ang target na elemento na may isang walang katapusang bilang ng mga pamantayan sa pag-format. Ang ilang mga pagkakataon ng kaalaman sa pagpapatakbo ng tampok na hover ay kinabibilangan ng:
- Pagbabago ng Kulay sa Background / Font
- Pag-embed ng Nakatagong Text Na Ipinapakita sa Hover
- Lumikha ng Mga Epekto ng Rollover sa Mga Larawan
- Awtomatikong Pag-zoom sa Teksto / Mga Larawan
- Baguhin ang Pagkakataon ng Imahe
- Pag-embed ng Teksto
- Pagpalit ng Imahe
- Div. Magpasadya
- Maramihang Iba Pang Mga Pagpapatakbo ng Pag-format ng CSS Hover.
Karaniwang binabago ng hover effect ang halaga ng pag-aari ng isang elemento upang paganahin ang mga animate na pagbabago sa isang nakasaad na teksto / imahe o kani-kanilang mga elemento. Ang pag-embed ng mga elemento ng CSS hover sa isang disenyo ng web page ay nagbabago ng isang regular na web page sa isang interactive, matatag at lubos na gumaganang web-page. Ang mga disenyo ng web page na ito ay madaling gamitin at komprehensibo. Naglalaman ang mga hover na nakadisenyo ng web page ng mas mataas na apela ng consumer at inaakit nila ang abiso ng mga potensyal na customer.
ano ang nababago sa java
Pagkatugma ng Hover sa CSS
Ang tampok na pag-hover ay tugma sa lahat ng mga pangunahing web browser. Gayunpaman, ang pagpapatupad ng elementong ito sa mga touch device ay isang mapaghamong gawain pa rin. Nagbibigay-daan ang pag-hover sa CSS sa kakayahang ma-access ang nilalaman sa mga device na hindi sumusuporta sa mga pagpapaandar ng hover. Napansin na ang isang aktibong pag-andar ng hover sa hindi suportadong aparato ay maaaring makaalis sa aparato.
ay isang masters isang postgraduate degree
Dahil dito, ang mahahalagang pagpapakita ng mahahalagang nilalaman ay na-block sa pamamagitan ng isyu sa pag-format. Sa isang banda kung saan ang hover na elemento sa programa ng CSS ay nag-aambag ng isang mahusay na antas ng mahusay na pag-personalize sa mga web page nang kabaligtaran, ang kakayahang magamit nito sa mga mobile device ay lubos na hindi natutulog. Capitulate sa mga pangyayari kung saan ang mundo ng teknolohiya ng Impormasyon ay lumalaki nang malaki mobile ang pag-hover ay nagtatampok ng mga panganib na lipas na sa mga pagsulong sa teknolohiya. Samakatuwid, ang pangangailangan na gumawa ng isang portable na tampok na naka-embed na gumagana sa mga touch at mobile device ay lubos na mahalaga.
Paano gumagana ang Hover sa CSS?
Ang aktibong istilong pseudo-class ay nangingibabaw sa pag-format ng hover ng CSS at pinalalampas nito ang anumang / lahat ng kasunod na link na sinusundan ng pseudo-class na ito. Halimbawa sa pseudo-class na ': link: binisita, o: aktibo ang: patakaran sa hover ay kailangang ilagay pagkatapos ng: link at: binisita ngunit bago: aktibo para sa naaangkop: hover na estilo. Ang LVHA-order:: link,: hover,: binisita, at: aktibo ay ginagamit bilang isang sanggunian para sa wastong: hover formatting style.
div {background-color: green padding: 18px display: none} span: hover + div {display: block}Hover Test!Lumilitaw ang nakatagong code sa pag-hover
Sa code sa itaas, ang elemento ng span ay binago upang pagsamahin ang hover at div na elemento sa pamamagitan ng paggamit ng span: hover + div na elemento. Ang elemento ng span na ipapakita sa pangunahing landing web page ay magpapakita ng teksto na 'Hover test!' Ang karagdagang pag-hover sa elemento ng span ay nagpapakita ng elemento ng div na 'Nakatagong code na ipinapakita sa pag-hover'. Ang format ng pag-embed na ito ay pagpapatakbo sa teksto pati na rin ang mga imahe.
Palitan ang kulay ng Hover sa Background sa 'Pula'
p: hover, h1: hover, a: hover {background-color: Red}Mag-hover Red
Mag-hover Red
Mga Link:
Hover Test Red:
Google comTandaan: Kamusta
Ang code sa itaas ay nagpapasadya ng
,