Cerca
Filtra la ricerca ...
Frase esatta
Categorie

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 mouse Situazione 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 hover Come 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 😛

Potrebbe interessarti anche ...

Lascia un commento

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