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 plaasvind wanneer jy die wyser oor 'n skakel van enige aard plaas. Die skakel kan gekodeer word om op die hover te reageer deur kleur te verander, 'n nuwe prent te vertoon 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 teks kleur) dui daarop dat die teks is 'kliek-vermoë' en verbeter web interaksies. Die verandering van tekskleur en -style (onderstreep / oorlyn / vetdruk) is egter baie basiese en daar is baie meer wat met hover gedoen kan word.

In hierdie artikel gaan ek wys hoe jy goeie soekskakels met hover-effek kan skep.

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

Om hierdie hover effek te wys, plaas bloot klas x in die aangewese area. Hier is 'n voorbeeld van hoe jy 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 om jou skakels koel te maak. Hier is nog 'n voorbeeld van wat ons kan doen met die hover effekte met 'n effens ander metode. Weereens, kyk gerus na die finale 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

Maak eers twee beelde van afgeronde reghoek. Vir demonstrasiedoel, sal ons nie hierdie twee beelde in hierdie voorbeeld saamsmelt nie. Ons noem die rooi (#CC3300) reghoek as b1.png; en die maroen (# 9F2800) reghoek as b2.png.

Die CSS-kode

Hierna volg die kodes vir jou 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 vir jou waardevolle inligting gebring het en sommige van julle geïnspireer het om CSS op kreatiewe wyse te gebruik. As daar enige ander punte is wat jy dink ek moet byvoeg in hierdie gids, voel vry om jou idees in die kommentaar afdeling te laat.

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.