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)
Situazione div all’hover (onmousehover)
Situazione div al click del mouse (onmouseclick)
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.
<pclass="content">Lorem Ipsumèun testo segnaposto utilizzato nel settore della tipografiaedella stampa.Lorem Ipsumèconsiderato il testo segnaposto standard sin dal sedicesimo secolo,quando un anonimo tipografo prese una cassetta di caratterieli assemblòper preparare un testo campione.Èsopravvissuto non soloapiùdi cinque secoli,ma anche al passaggio alla videoimpaginazione,pervenendoci sostanzialmente inalterato.Fu reso popolare,negli anni’60,con la diffusione dei fogli di caratteri trasferibili“Letraset”,che contenevano passaggi del Lorem Ipsum,epiùrecentemente da software di impaginazione come Aldus PageMaker,che includeva versioni del Lorem Ipsum.</br>Al contrario di quanto si pensi,Lorem Ipsum nonèsemplicemente una sequenza casuale di caratteri.Risale ad un classico della letteratura latina del45AC,cosa che lo rende vecchio di2000anni.Richard McClintock,professore di latino al Hampden-Sydney College inVirginia,ha ricercato una delle piùoscure parole latine,consectetur,da un passaggio del Lorem Ipsumeha scoperto traivari testi incuiècitata,la fonte da cuiètratto il testo,le sezioni....[cut]</p>
<pclass="content">Lorem Ipsumèun testo segnaposto utilizzato nel settore della tipografiaedella stampa.Lorem Ipsumèconsiderato il testo segnaposto standard sin dal sedicesimo secolo,quando un anonimo tipografo prese una cassetta di caratterieli assemblòper preparare un testo campione.Èsopravvissuto non soloapiùdi cinque secoli,ma anche al passaggio alla videoimpaginazione,pervenendoci sostanzialmente inalterato.Fu reso popolare,negli anni’60,con la diffusione dei fogli di caratteri trasferibili“Letraset”,che contenevano passaggi del Lorem Ipsum,epiùrecentemente da software di impaginazione come Aldus PageMaker,che includeva versioni del Lorem Ipsum.</br>Al contrario di quanto si pensi,Lorem Ipsum nonèsemplicemente una sequenza casuale di caratteri.Risale ad un classico della letteratura latina del45AC,cosa che lo rende vecchio di2000anni.Richard McClintock,professore di latino al Hampden-Sydney College inVirginia,ha ricercato una delle piùoscure parole latine,consectetur,da un passaggio del Lorem Ipsumeha scoperto traivari testi incuiècitata,la fonte da cuiètratto il testo,le sezioni....[cut]</p>
<pclass="content">Lorem Ipsumèun testo segnaposto utilizzato nel settore della tipografiaedella stampa.Lorem Ipsumèconsiderato il testo segnaposto standard sin dal sedicesimo secolo,quando un anonimo tipografo prese una cassetta di caratterieli assemblòper preparare un testo campione.Èsopravvissuto non soloapiùdi cinque secoli,ma anche al passaggio alla videoimpaginazione,pervenendoci sostanzialmente inalterato.Fu reso popolare,negli anni’60,con la diffusione dei fogli di caratteri trasferibili“Letraset”,che contenevano passaggi del Lorem Ipsum,epiùrecentemente da software di impaginazione come Aldus PageMaker,che includeva versioni del Lorem Ipsum.</br>Al contrario di quanto si pensi,Lorem Ipsum nonèsemplicemente una sequenza casuale di caratteri.Risale ad un classico della letteratura latina del45AC,cosa che lo rende vecchio di2000anni.Richard McClintock,professore di latino al Hampden-Sydney College inVirginia,ha ricercato una delle piùoscure parole latine,consectetur,da un passaggio del Lorem Ipsumeha scoperto traivari testi incuiècitata,la fonte da cuiètratto il testo,le sezioni....[cut]</p>
</div>
</div>
<!--ENDBOX-->
</div>
</div>
</div>
Javascript
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script>
$(document).ready(function(){
//START BOX
//show content div on click
$("#box_1_show").click(function(){
$("div.box_1_empty").show();
});
//hide content when mouse is out of div area
$(".box_1_empty").on('mouseout',function(){
$("div.box_1_empty").hide("clip");
});
//END BOX
//START BOX
//show content div on click
$("#box_2_show").click(function(){
$("div.box_2_empty").show();
});
//hide content when mouse is out of div area
$(".box_2_empty").on('mouseout',function(){
$("div.box_2_empty").hide("clip");
});
//END BOX
//START BOX
//show content div on click
$("#box_3_show").click(function(){
$("div.box_3_empty").show();
});
//hide content when mouse is out of div area
$(".box_3_empty").on('mouseout',function(){
$("div.box_3_empty").hide("clip");
});
//END BOX
});
</script>
CSS
“la_tua_path” va sostituita con il percorso assoluto dell’immagine.
Programmatore WordPressesperto WooCommerce, sviluppo di plugin con interfaccia amministrativa.
Sono l’autore di questo blog con tanti trucchi e guide su WordPress e WooCommerce.
Potrebbe interessarti anche ...
Creare un form PHP con Google ReCaptcha Antispam e Bootstrap
Typed.js , testo automatico in stile terminale MacOS e macchina da scrivere
Come creare un template admin per WordPress
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
