tolga coskun tolga coskun - 1 month ago 10
jQuery Question

List hover show images jquery

Hi i need to do when list item mouseover change image(other div) with the same index and it must be stay when it is clicked.When mouseleave it must be what before clicked or whichone active. i did something but not working.

<div class="all-wrap">
<div class="left-side">
<ul>
<li>Tittle 1</li>
<li>Tittle 2</li>
<li>Tittle 3</li>
<li>Tittle 4</li>
<li>Tittle 5</li>
</ul>
</div>
<div class="right-side">
<img src="http://blog.dominictrumfio.com/wp-content/uploads/2015/08/Lorem-Ipsum-2.jpg" class="active">
<img src="http://blog.nateeul.com/wp-content/uploads/2011/01/Lorem-Ipsum3-01-EDITED.jpg">
<img src="http://blog.dominictrumfio.com/wp-content/uploads/2015/08/Lorem-Ipsum-2.jpg">
<img src="http://blog.nateeul.com/wp-content/uploads/2011/01/Lorem-Ipsum3-01-EDITED.jpg">
<img src="http://blog.dominictrumfio.com/wp-content/uploads/2015/08/Lorem-Ipsum-2.jpg">
</div>
</div>

$('.left-side ul li').hover(
function() {
$('.right-side img').eq($(this).index()).addClass("active");
$(this).click(funciton(){
$('.right-side img').eq($(this).index()).addClass("active");
};
}, function() {
$('.right-side img').eq($(this).index()).removeClass("active");
});


https://jsfiddle.net/tolga748/xju1hj9x/

Answer
$(function(){
    var index = 0;
    $('.left-side ul li').hover(function() {
        $('.right-side img').eq($(this).index()).addClass("active");
        $('.right-side img').eq($(this).index()).siblings("img").removeClass("active");
    }, function() {
        $('.right-side img').eq($(this).index()).removeClass("active");
        $('.right-side img').eq(index).addClass("active");
    });

    $('.left-side ul li').click(function(){
        index = $(this).index();
        var element = $('.right-side img').eq($(this).index());
        element.addClass("active");
        element.siblings('img').removeClass("active");
    });
});

Just replace your jquery with this. And you are good to go :)