Can I change an image on jquery hover?

Question

I have this big image displaying and on the bottom I have small images, I want the big image to the image I am hovering over if possible. Thanks.
This is the code I have.

<div class="wrapper">
    <div class="inner">
        <img src="img/1.png" alt="image 1">
    </div>
    <ul class="small">
        <li> <img src="img/1.png" alt="image 2"> </li>
        <li> <img src="img/2.png" alt="image 2"> </li>
        <li> <img src="img/3.png" alt="image 2"> </li>
        <li> <img src="img/4.png" alt="image 2"> </li>
        <li> <img src="img/5.png" alt="image 2"> </li>
    </ul>
</div>

and this is my jquery but doesn't work.

<script type="text/javascript">
$(document).ready(function() {
        $('.small').hover(function() {
            $('.inner img').attr('src' = '.small img src')
        });
});
</script>

Answer 1

Try this:

$(document).ready(function () {
    $('.small img').hover(function () {
        $('.inner img').attr('src' ,this.src)
    });
});

Demo here