SO - 25799437

by Arun P Johny

HTML

<div class="next">
    <img src="//placehold.it/50/00ff00&text=next"/>
</div>
<div class="prev">
    <img src="//placehold.it/50/ff0000&text=prev"/>
</div>

CSS

.next img {
    height: 50px;
    width: 50px;
    <!--
    position: absolute;
    top: 315px;
    right: 570px;
    -->
    z-index: 99;
}
.prev img {
    height: 50px;
    width: 50px;
    <!--
    position: absolute;
    top: 315px;
    left: 550px;
    -->
    z-index: 99;
}

JavaScript

$('.next').hover(function () {
    $(this).find('img').attr('src', '//placehold.it/50/ff0000&text=prev');
}, function () {
    $(this).find('img').attr('src', '//placehold.it/50/00ff00&text=next');
});