
Originariamente inviata da
Ines_88
Ciao Luca, grazie mille per la tua risposta!!!
Non conoscevo questo utilizzo del This, in effetti non conosco molto il javascript e le guide che avevo consultato mostravano altri millemila modi di utilizzarlo.
Risolto questo problema però mi sono accorta subito di un altro piccolo bug presente: appena passo col mouse sopra l’immagine,
il text-box appare correttamente, ma appena arrivo sopra di lui questo scompare
Ho provato a duplicare lo script di prima dedicandolo al text-box ma questo al massimo scompare e riappare, creando un effetto non corretto
Hai ragione, dovevo indicare anche il mio markup, eccolo qui:
codice:
<div class="col-md-6 project">
<a href="../page/">
<img src="../img/image.png">
</a>
<a href="../page/">
<div class="text-box">
<p class="project-title”>Project Title</p>
<p class="project-desc”>Description</p>
</div>
</a>
</div>
Scompare perché applichi gli eventi mouseover/mouseout solo sul tag img, di conseguenza, quando il mouse si sposta sul caption, scatta l'evento mouseout applicato all'immagine.
Conviene applicare gli eventi hover direttamente alla classe project e poi riferirsi agli elementi al suo interno.
codice:
$(".project").mouseout(
function(){
var scope=$(this);// elemento con classe project oggetto dell'evento.
$('img',scope).animate({ opacity: '1' }, 300); //opacity dell'immagine nel nostro .project
$(".text-box",scope).animate({ opacity: '0' }, 300); //.text-box "figlio" del .project
})
})