Bonjour
j'essaie de faire fonctionner un effet de hover avec 2 images.
J'ai deux divs avec une image chacune. Au passage de la souris sur la div je cache la première div pour afficher la seconde. Mon problème est que quand je laisse ma souris sur la div ça n'arrête pas de clignoter. L'effet que je veux est : au passage de la souris sur la div cela change d'image et quand on retire la souris de la div cela affiche l'image d'origine.
Je précise que j'ai plusieurs div avec les classes project et hover. Je veux que l'effet soit appliqué sur la div survolée et non sur toutes les div.
Voici le code en question :
Mon code jquery est probablement faux mais je vois pas où (je débute)
Merci
Modifié par Mokhona (04 Aug 2017 - 16:36)
j'essaie de faire fonctionner un effet de hover avec 2 images.
J'ai deux divs avec une image chacune. Au passage de la souris sur la div je cache la première div pour afficher la seconde. Mon problème est que quand je laisse ma souris sur la div ça n'arrête pas de clignoter. L'effet que je veux est : au passage de la souris sur la div cela change d'image et quand on retire la souris de la div cela affiche l'image d'origine.
Je précise que j'ai plusieurs div avec les classes project et hover. Je veux que l'effet soit appliqué sur la div survolée et non sur toutes les div.
Voici le code en question :
<div class="project">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg" alt="">
</div>
<div class="hover">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn.jpg/320px-Chess_pawn.jpg" alt="">
</div>
$(document).ready(function () {
$(".project").hover(function() {
$(this).hide();
$(this).next('div').show();
}, function() {
$(this).show();
$(this).next('div').hide();
});
});
.hover {
display: none;
}
Mon code jquery est probablement faux mais je vois pas où (je débute)
Merci
Modifié par Mokhona (04 Aug 2017 - 16:36)