Come creare un collegamento con l'immagine al passaggio del mouse in un semplice CSS

Articolo scritto da:
  • Website Design
  • Aggiornato: Aug 02, 2013

Che cos'è un hover? Definizione citata da UWStout.edu:

'Hover' è un effetto che si verifica quando si posiziona il cursore su un collegamento di qualsiasi tipo. Il collegamento può essere codificato per rispondere al passaggio del mouse modificando il colore, mostrando una nuova grafica o persino riproducendo un file audio.

L'effetto hover migliora l'usabilità del web e aiuta i proprietari di siti web a dirigere i loro traffici web. Quando desideri che i tuoi utenti web prestino particolare attenzione a un link speciale, un buon modo per farlo è creare un collegamento con un effetto hover attraente. Un semplice effetto hover in questo modo (una semplice sottolineatura e modifica del colore del testo) indica che il testo è "abilitato ai clic" e migliora le interazioni web. Tuttavia, cambiare il colore e gli stili del testo (sottolineato / sottolineato / grassetto) è molto semplice e ci sono molte altre cose che si possono fare con il passaggio del mouse.

In questo articolo, mostrerò come è possibile creare collegamenti di bell'aspetto con effetto hover.

Esempio 1: collegamento con il pulsante al passaggio del mouse

Per prima cosa, guarda l'esempio di lavoro (posiziona il mouse sul link per vedere come funziona - cambio di icona a lato).

Esempio 1 - Collegamento con l'immagine del pulsante al passaggio del mouse

Questa è la versione completa di ciò che verrà costruito in questo esempio.

Come lo creiamo in semplice CSS?

L'immagine del pulsante

Passo 1, come puoi vedere, abbiamo bisogno di icone a freccia in due versioni diverse. Nel nostro esempio, ho usato il rosso (#CC3300) come pulsante di collegamento predefinito; e grigio (#333333) per l'effetto hover. Tale pulsante può essere facilmente realizzato utilizzando qualsiasi software di modifica delle immagini.

Ora abbiamo il pulsante del colore rosso (ad esempio, b1.png) e il colore del rey (pulsante dire, b2.png). Unisci questi due in un unico file immagine con b1.png in cima a b2.png. Questa sarà la nostra immagine finale per il collegamento. Chiamalo (per esempio, x.png) e carica la posizione desiderata (nel mio caso l'ho inserito nella cartella del mio modello WP).

Per tua informazione:

b1.png , b2.png e x.png

Il codice CSS

Successivamente, sul codice CSS. Fondamentalmente ciò che vogliamo ottenere è far rientrare leggermente il testo del link a destra per fare spazio al pulsante; e allo stesso tempo, mostra un'immagine diversa quando il link è in hover. Sono cose piuttosto fondamentali, tranne per il fatto che abbiamo bisogno di una piccola svolta nella posizione di sfondo. Il trucco è mostrare la parte superiore dell'immagine (il pulsante rosso) per il collegamento originale; e quando passa il mouse, sposta l'immagine di sfondo con un margine -11px (potrebbe differire sul tuo sito web) per mostrare il pulsante grigio.

.xa {color: #cc3300; padding-left: 14px; font-weight: bold; background-image: url (images / x.png); posizione di sfondo: 0 2px; background-repeat: no-repeat; }
.xa: hover {color: #333333; padding-left: 14px; font-weight: bold; background-image: url (images / x.png); background-position: 0 -11px; background-repeat: no-repeat; }

Implementazione

Per mostrare questo effetto hover, inserisci semplicemente la classe x nell'area designata. Ecco un esempio su come puoi farlo.

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

Esempio 2: collegamento sullo sfondo al passaggio del mouse

Con lo stesso concetto, ci sono infiniti modi in cui puoi rendere i tuoi collegamenti interessanti. Ecco un altro esempio di cosa possiamo fare con gli effetti hover con un metodo leggermente diverso. Ancora una volta, dai un'occhiata alla versione finita.

Esempio 2 - Link in background hover

In questo esempio, quello che farò è creare un collegamento ipertestuale che piaccia ai pulsanti, in cui lo sfondo cambierà quando gli utenti posizionano il mouse su di esso.

Come lo creiamo in semplice CSS?

Le immagini di sfondo

Innanzitutto, crea due immagini di rettangolo arrotondato. A scopo dimostrativo, in questo esempio non uniremo queste due immagini. Chiameremo il rettangolo rosso (#CC3300) come b1.png; e il rettangolo marrone (#9F2800) come b2.png.

Il codice CSS

Quindi, ecco i codici per il tuo foglio di stile (in questo secondo esempio nomineremo la classe 'y').

ay {width: 280px; altezza: 42px; colore: #000000; padding: 10px; text-decoration: none; blocco di visualizzazione; font-weight: bold; background-image: url (images / b1.png); background-repeat: no-repeat; }
ay: hover {width: 280px; altezza: 42px; colore: #FFFFFF; padding: 10px; font-weight: bold; text-decoration: none; blocco di visualizzazione; background-image: url (images / b2.png); background-repeat: no-repeat; }

Implementazione

Per visualizzare il link, inserisci semplicemente la classe (y) nel tag <a href> nel codice sorgente. Esempio:

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

Concludendo

Spero che questo articolo ti abbia fornito informazioni preziose e abbia ispirato alcuni di voi a utilizzare i CSS in modo creativo. Se ci sono altri punti che pensi dovrei aggiungere in questa guida, sentiti libero di lasciare le tue idee nella sezione commenti.

Altri tutorial CSS

Se ti piace questo post, assicurati di controllare anche Come fare buon uso delle animazioni CSS 3, Deve leggere i tutorial 3 CSS 2012, così come Rendi cool il tuo sito con queste tecniche CSS 3.

A proposito di Jerry Low

Fondatore di WebHostingSecretRevealed.net (WHSR) - una recensione di hosting fidata e utilizzata dagli utenti di 100,000. Più di 15 anni di esperienza in web hosting, affiliate marketing e SEO. Collaboratore di ProBlogger.net, Business.com, SocialMediaToday.com e altro.