列表悬停显示图像jquery(List hover show images jquery)

嗨我需要做的当列表项鼠标悬停更改图像（其他div）具有相同的索引，它必须保持单击它。当鼠标离开它必须是点击之前或哪个活动。我做了一些事但没有工作。

<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/

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.

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

最满意答案

$(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"); }); });

用这个替换你的jquery。你很高兴去:)

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

更多推荐