Paano Ipapatupad ang Hover sa CSS na may Mga Halimbawa



Magbibigay sa iyo ang artikulong ito ng isang detalyado at komprehensibong kaalaman tungkol sa kung paano ipatupad ang Hover sa CSS na may Mga Halimbawa.

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?

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.





Mag-hover sa CSS

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 com

Tandaan: Kamusta

Ang code sa itaas ay nagpapasadya ng

,

at elemento at isinasama ang mga ito sa isang pangkaraniwang pag-andar ng hover. Ang code na ito ay dinisenyo upang baguhin ang kulay ng teksto sa pula kapag ang mouse pointer ay lumilipat sa kanila. Ipinapakita ng sangkap na h1 at h2 ang 'CSS: Hover Test Code' at 'Hover Red' ayon sa pagkakabanggit. Ang elemento ng talata: Hover Test Red at anchor tag: ang google.com ay nai-highlight sa pula kapag ang mouse pointer ay lumilipat sa kanila.

ano ang ibig sabihin ng tostring sa java

Lumilikha ng Hover Opacity sa Mga Larawan

.pic {width: 1900px taas: 1900px opacity: 1 filter: alpha (opacity = 100) background: url (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) hindi na ulitin} .pic: i-hover {opacity: 0.2 filter: alpha (opacity = 30)}

Ipinapakita ng programang CSS sa itaas ang pagbabago ng opacity ng isang imahe sa pag-hover. Ang orihinal na opacity ng imahe ay isa gayunpaman, ang paggamit ng opacity hover filter ng pareho ay nabago sa 0.2. Ipinapakita ng code na ito na sa pamamagitan ng paggamit ng hover na elemento ay maaaring mabago ang isang opacity ng isang imahe at / o teksto.

Lumilikha ng Overlay ng Teksto sa Mga Larawan

.pic {lapad: 4000px taas: 2170px background: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) hindi na ulitin} .text {lapad: 3400px taas: 2170px background: #FFF opacity: 0} .pic: hover .text {opacity: 0.6 text-align: justify color: # 000000 font-size: 20px font-weight: 700 font-family: 'Times New Roman', Times, serif padding: 30px} Ang Orange ay isang hibla mayamang prutas. Ang mga anti-oxidant na naroroon sa isang kahel ay maaaring makatulong sa panunaw, gawing glow ng balat at kumilos bilang isang anti-aging element.

Ang Layering ng Teksto sa pag-hover ng CSS ay isang mahusay na tool upang mai-embed ang mapaglarawang teksto ng imahe sa loob mismo ng imahe. Ang tool na ito ay tumutulong sa pagbibigay ng isang compact pangkalahatang ideya ng imahe nang hindi kumukuha ng tulog na puwang sa limitadong espasyo sa pagdidisenyo ng web. Sa code na ito, ang imahe sa background ay naka-embed na may isang mapaglarawang teksto na ipinapakita kapag ang mouse pointer ay lumilipat sa teksto.



Tinatapos nito ang lahat ng mahahalagang aspeto ng pag-hover sa CSS at i-highlight ang kakayahang magamit nito sa pagbuo ng web. Mayroong maraming mga espesyal na epekto na maaari itong dalhin sa aming mga web page. Maaari naming palaging subukan ang iba't ibang mga kumbinasyon ng hover selector kasama ang iba pang mga katangian ng CSS tulad ng animasyon, mga larawan sa background, hyperlink atbp at tuklasin ang potensyal nito tulad ng nakita namin sa ilan sa aming mga halimbawa. Sa wakas, ang CSS ay isa sa pinakamakapangyarihang paraan upang mag-disenyo at magbago ng mga webpage at kaya't malapit na para sa mga developer ng web na makuha ang kasanayang ito upang makabuo ng mga pabuong web page.

Suriin ang aming na kasama ng live na pagsasanay na pinamunuan ng magtuturo at karanasan sa proyekto sa totoong buhay. Ang pagsasanay na ito ay gumagawa sa iyo ng kasanayan sa mga kasanayan upang gumana sa back-end at front-end na mga teknolohiya sa web. Kabilang dito ang pagsasanay sa Pag-unlad sa Web, jQuery, Angular, NodeJS, ExpressJS, at MongoDB.

May tanong ba sa amin? Mangyaring banggitin ito sa seksyon ng mga komento ng 'Mag-hover sa CSS' blog at babalikan ka namin.