jQuery Script

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

Per questo articolo sono disponibili Demo Download Script

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 😛

http://ad.zanox.com/ppc/?43729199C765911427T

Commenta l'articolo

Bisogno di postare codice ? Usa un servizio gratuito come Codeshare altrimenti WordPress formatta male il codice!

Pin It on Pinterest

Condividi l'articolo. Grazie.

Vuoi essere aggiornato ?