列表悬停显示图像jquery答案

【问题标题】：List hover show images jquery列表悬停显示图像jquery
【发布时间】：2016-10-24 13:09:42
【问题描述】：

您好，当列表项鼠标悬停更改具有相同索引的图像（其他 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/

【问题讨论】：

标签： jquery mouseover

【解决方案1】：

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

【讨论】：

【解决方案2】：

请检查下面的sn-p。

$(".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>

【讨论】：

【解决方案3】：

你可以这样做：

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

【讨论】：