Hoe om skakel met hover beeld in plain CSS te skep

Artikel geskryf deur:
  • Website Design
  • Opgedateer: Aug 02, 2013

Wat is 'n hover? Definisie aangehaal uit UWStout.edu:

'Hover' is 'n effek wat voorkom as u die muisaanwyser oor 'n skakel van enige aard plaas. Die skakel kan gekodeer word om op die hover te reageer deur van kleur te verander, 'n nuwe grafika te wys, of selfs 'n klanklêer te speel.

Die hover-effek verbeter web bruikbaarheid en help web eienaars om hul webtraffics te rig. As jy wil hê dat jou webgebruikers ekstra aandag moet skenk aan 'n spesiale skakel, is dit 'n goeie manier om dit te doen met 'n skakel met aantreklike hover effek. 'N Eenvoudige sweef effek soos hierdie ('n eenvoudige onderstreep en verandering van tekskleur) dui aan dat die teks 'klikbaar' is en die internetinteraksies verbeter. Die verandering van tekskleur en -style (onderstreep / onderstreep / vetdruk) is egter baie basies en daar kan nog baie meer met hover gedoen word.

In hierdie artikel gaan ek wys hoe u goeie skakels kan skep met die effek van die hover.

Voorbeeld 1: Skakel met hover-knoppie

Eerstens, kyk na die werkvoorbeeld (plaas die muis oor die skakel om te sien hoe dit werk - verandering van ikoon aan die kant).

Voorbeeld 1 - Link met hover knoppie beeld

Hierdie is die voltooide weergawe van wat in hierdie voorbeeld gebou sal word.

Hoe maak ons ​​dit in plain CSS?

Die knoppie prent

Stap 1, soos u kan sien, benodig ons 'n pylikone in twee verskillende weergawes. In ons voorbeeld gebruik ek rooi (#CC3300) as die verstek skakelknoppie; en grys (# 333333) vir die hover effek. So 'n knoppie kan maklik gemaak word met behulp van enige beeldbewerkingsprogrammatuur.

Ons het nou die rooi kleurknoppie (sê b1.png) en die rey kleur (knoppie sê, b2.png). Voeg hierdie twee saam in een prentlêer met b1.png bo-op b2.png. Dit sal ons finale beeld vir die skakel wees. Noem dit (sê, x.png) en laai die gewenste plek op (vir my geval het ek dit in my WP sjabloonmap geplaas).

Vir jou verwysing:

b1.png , b2.png , en x.png

Die CSS-kode

Volgende, op die CSS-kode. Basies wat ons wil bereik is om die skakel teks effens regs in te sluit om plek vir die knoppie te maak; en in dieselfde tyd, vertoon 'n ander beeld wanneer die skakel in hover staat is. Hierdie is redelik fundamentele dinge, behalwe dat ons 'n bietjie draai op die agtergrondsposisie nodig het. Die truuk is om die boonste deel van die prent (die rooi knoppie) vir die oorspronklike skakel te wys; en wanneer dit beweeg, verplaas die agtergrond prent met 'n -11px (dit mag verskil op jou webwerf) marge om die grys knoppie te vertoon.

.xa (kleur: #cc3300; padding-links: 14px; font-weight: bold; agtergrond-beeld: url (beelde / x.png); agtergrond-posisie: 0 2px; agtergrond-herhaling: nie-herhaal; }
.xa: hover (kleur: # 333333; padding-links: 14px; font-weight: bold; agtergrond-beeld: url (beelde / x.png); agtergrondposisie: 0 -11px; agtergrond-herhaling: nie-herhaal; }

Implementering

Voeg die klas x in die aangewese area in om die muiseffek te wys. Hier is 'n voorbeeld van hoe u dit kan doen.

<p class = 'x'> <a href="http://www.webhostingsecretrevealed.com"> Tuisblad </ a> </ p>

Voorbeeld 2: Skakel in hover agtergrond

Met dieselfde konsep is daar eindelose maniere waarop u u skakels cool kan laat lyk. Hier is nog 'n voorbeeld van wat ons kan doen met die hover-effekte met 'n effens ander metode. Kyk weer na die voltooide weergawe.

Voorbeeld 2 - Link in hover agtergrond

In hierdie voorbeeld, wat ek sal doen, is om 'n knoppie-hiperskakel te skep waar die agtergrond sal verander wanneer gebruikers hul muis daaroor plaas.

Hoe maak ons ​​dit in plain CSS?

Die agtergrond beelde

Skep eers twee beelde van die ronde reghoek. Ter demonstrasie sal ons hierdie twee beelde nie in hierdie voorbeeld saamsmelt nie. Ons sal die rooi (#CC3300) reghoek benoem as b1.png; en die maroen (#9F2800) reghoek as b2.png.

Die CSS-kode

Hier volg die kodes vir u stylblad (ons noem die klas 'y' in hierdie tweede voorbeeld).

ay {width: 280px; hoogte: 42px; kleur: # 000000; vulling: 10px; text-decoration: none; vertoon: blok; font-weight: bold; agtergrond-beeld: url (beelde / b1.png); agtergrond-herhaling: nie-herhaal; }
ay: hover {width: 280px; hoogte: 42px; kleur: #FFFFFF; vulling: 10px; font-weight: bold; text-decoration: none; vertoon: blok; agtergrond-beeld: url (beelde / b2.png); agtergrond-herhaling: nie-herhaal; }

Implementering

Om die skakel te vertoon, plaas die klas (y) eenvoudig in die <a href> -tag in u bronkode. voorbeeld:

<a href="http://www.webhostingsecretrevealed.com" class="y"> Tuisblad </a>

Wikkel

Ek hoop dat hierdie artikel waardevolle inligting vir u gebring het en sommige van u geïnspireer het om CSS op 'n kreatiewe manier te gebruik. As daar enige ander punte is wat u dink dat ek hierdie gids moet byvoeg, laat u gerus u idees in die kommentaargedeelte.

Meer CSS tutoriale

As jy van hierdie pos hou, moet jy seker ook kyk Hoe om goeie CSS 3 animasies te gebruik, Moet Lees CSS 3 Tutoriale 2012, sowel as Maak jou werf koel met hierdie CSS 3 tegnieke.

Oor Jerry Low

Stigter van WebHostingSecretRevealed.net (WHSR) - 'n hosting-oorsig wat deur 100,000 se gebruikers vertrou en gebruik word. Meer as 15 jaar ervaring in web hosting, affiliate marketing en SEO. Bydraer tot ProBlogger.net, Business.com, Social MediaToday.com, en meer.