Cerca
Filtra la ricerca ...
Frase esatta
Filter by Custom Post Type
Categorie
Tags

Puoi disiscriverti da una o tutte le liste in qualunque momento

JQuery, cambiare immagine all’hover e mostrare testo al click

Oggi parliamo un pò di jQuery, in questo articolo voglio spiegare come è possibile mostrare o nascondere un div al click del mouse e come cambiare l’immagine all’hover, sempre all’interno dei div box.

Scrivendo qualche riga di codice possiamo infatti nascondere o mostrare un div con jQuery (hide/show div); ma nel mio caso oltre che a nascondere o mostrare un contenuto al click, ho inserito anche la possibilità di cambiare l’immagine all’hover e, già che c’ero, perchè non inserire qualche effetto ? 🙂

Il bello di questo script è che ha 3 stati :

  • onmousehover
  • onmouseclick
  • onmouseout

Situazione div a “riposo” (onmouseout)

come mostrare o nascondere div al click del mouseSituazione div all’hover (onmousehover)

cambaire immagine all'hover del mouse

Situazione div al click del mouse (onmouseclick)

how to show div on click or on mouse hoverCome mostrare o nascondere un div content con jQuery

Nel mio caso ho utilizzato anche Bootstrap per l’impaginazione.

Quindi procediamo incorporando le librerie necessarie dalle MaxCDN e dalle CDN di Google.

ora richiamiamo il file css da locale

HTML

Javascript

CSS

la_tua_path” va sostituita con il percorso assoluto dell’immagine.

Alla prossima! Yeeeaaaah 😛

Commenta l'articolo

Bisogno di postare codice ? Usa un servizio gratuito come Codeshare altrimenti WordPress formatta male il codice ed io non posso aiutarti!
Se necessiti delle modifiche al codice che ho scritto puoi chiedermi una consulenza, non ti risponderò nei commenti. Ti ringrazio per la collaborazione, sono certo che tu capisca.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.