[Dilettante_Pro]

<img class="test" src = "https://javascript.ru/cat/list/donkey.gif">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
   $(".test").on("mouseover", function() {
       $(this).attr("src","https://javascript.ru/cat/list/jquery_54.png");
   });
   $(".test").on("mouseleave", function() {
       $(this).attr("src","https://javascript.ru/cat/list/donkey.gif");
   });
</script>

Или без jquery и скриптов

<style>
.test {
width:50px;
height:50px;
background-image: url(https://javascript.ru/cat/list/donkey.gif)
}
.test:hover {
background-image: url(https://javascript.ru/cat/list/jquery_54.png)
}
</style>
<div class="test"></div>