使用淡入淡出在悬停和返回时更改图像

Question

I'm trying to change an image on hover and back again.

The idea is that when I hover over an image, it fades into a different image and when my mouse leaves, the image fades back to the original.

Here is what I have tried so far, using jQuery:

<img src="https://www.shareicon.net/data/128x128/2015/08/17/86675_cat_256x256.png" />

<script>

$("img").hover(function(event) {
    event.preventDefault();
    console.log("hover");

    $("img").fadeOut(400, function() {
        $("img").attr("src", "http://files.softicons.com/download/animal-icons/meow-icon-set-by-iconka/png/128x128/cat_purr.png")
    }).fadeIn(400, function() {
        $("img").attr("src", "https://www.shareicon.net/data/128x128/2015/08/17/86675_cat_256x256.png")
    });
});

</script>

Answer 1

You can actually do this with plain CSS and it would be more efficient.

Just create a div, put both images inside, absolute position so one is on top of another, and when hover apply opacity: 0 with a transition to the front image.

You can achieve this with position absolute, z-index, and hover pseudo selector.

 .container{ width: 300px; height: 300px; position: relative; } img{ position: absolute; top: 0; left: 0; } .img-top{ z-index: 999999; transition: 0.3s linear all; } .img-top:hover{ opacity: 0; } 

 <div class="container"> <img class="img-bottom" src="https://www.cesarsway.com/sites/newcesarsway/files/d6/images/askthevet/checklist.jpg" alt=""> <img class="img-top" src="https://i.ebayimg.com/images/g/k2gAAOSwT5tWKhVS/s-l300.jpg" alt=""> </div>