列出悬停显示图像 jquery

Question

嗨，当列表项鼠标悬停更改图像（其他 div）时，我需要做的是具有相同的索引，并且当它是 clicked.When mouseleave 时它必须保留它必须是点击之前的内容或 whichone积极的。我做了一些但没有工作。

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

你可以这样做：

https://jsfiddle.net/tejashsoni111/xju1hj9x/1/

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

Answer 2

$(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。你很高兴去:)

Answer 3

请检查以下代码段。

$(".left-side ul li").hover(function(){
  if(!$('.right-side img').eq($(this).index()).hasClass('not-remove')){
    $('.right-side img').eq($(this).index()).addClass("active");  
  }
},function(){
  if(!$('.right-side img').eq($(this).index()).hasClass('not-remove')){
    $('.right-side img').eq($(this).index()).removeClass("active");
  }
});

$('.left-side ul li').click(function() {
  $('.right-side img').eq($(this).index()).addClass("not-remove").addClass("active");
});

.all-wrap
{
    width: 100%;
    position: absolute;
    float: left;
}
.left-side
{
    width: 50%;
    float: left;
    position: relative;
}
.left-side ul li
{
    cursor: pointer;
    margin-bottom:10px;
}
.left-side ul li:hover
{
  color:red;
}
.right-side
{
    width: 50%;
    float: left;
    position: relative;
}
.right-side img
{
    width: 100%;
    float: left;
    display:none;
}
.right-side img.active
{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

列出悬停显示图像 jquery

List hover show images jquery

jquery

mouseover