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 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 😛

Potrebbe interessarti anche ...

Non fornisco assistenza gratuita sugli articoli che ho scritto nè personalizzo il codice in modo gratuito, se vuoi mi chiedi una consulenza nella sezione contatti. Se devi postare codice usa servizi come https://codeshare.io . Grazie della comprensione. Alessio

Lascia un commento

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