1

I'm trying to alternate 2 images with the hover effect of Jquery but I've got an issue. The 2 images are blinking when my mouse is still in the div with the hover effect. I want to my images don't blink when the mouse is still in the div.

My jquery code is probably wrong somewhere (I'm a beginner).

$(document).ready(function () { 

    $(".project").hover(function() {
        $(this).hide();
        $(this).next('div').show();
    }, function() {
        $(this).show();
        $(this).next('div').hide();
    });

});
.hover {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Edit : Thanks for your answers. I try this solution :

$(document).ready(function () {  

$(".project").mouseover(function() {
    $('.hover').show();
    $('.project').hide();
});

$(".hover").mouseout(function() {
       $('.project').show();
    $('.hover').hide();
});

});

It partially works. I forgot to say that I have others div with project and hover classes. If I use this code all my hover divs are shown. I want to aply the hover effect only on a div at once.

Thanks

Mokhona
  • 11
  • 3

3 Answers3

0

Here is a sneaky way of how you can achieve it. I did a small trick with the <img> tag so the div can automatically resize, based on the picture.

Hope this helps!

$(document).ready(function () { 

    $(".project").hover(function() {
        $(".project").css("background-image","url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn.jpg/320px-Chess_pawn.jpg)");
      
    }, function() {
        $(".project").css("background-image", "url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg)");
     
    });

});
.project {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg");
  background-repeat: no-repeat;
  width: 300px;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn.jpg/320px-Chess_pawn.jpg" style="visibility: hidden;" />
</div>
N. Ivanov
  • 1,795
  • 2
  • 15
  • 28
0
Look at below example


$(document).ready(function () { 
$(".project").mouseover(function() {
    $('.hover').show();
    $('.project').hide();
  });

  $(".hover").mouseout(function() {
    $('.project').show();
    $('.hover').hide();
  });
});
.hover {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
Kunal Patel
  • 119
  • 1
  • 9
-1

$(document).ready(function() {

  $(".project").mouseover(function() {
    $(this).hide();
    $('.hover').show();
  });

  $(".hover").mouseout(function() {
    $(this).hide();
    $('.project').show();
  });

});
.hover {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

$(".project").mouseover(function() {
    $(this).hide();
    $('.hover').show();
  });

  $(".hover").mouseout(function() {
    $(this).hide();
    $('.project').show();
  });
Siddhesh Abhale
  • 1
  • 1