仅显示一个div并使用索引隐藏其余div

Question

我希望有一个函数将fondIn（）一个div与类图像悬停在另一个类上。但是每个类都有多个div，并希望每个div对应另一个div。我不得不使用index（）来获取每个类的不可数，然后将每个索引号相等，只​​显示相应的一个。

澄清我将其表达为代码：

   <div class="container">
        <div class="woot"></div>
        <div class="woot"></div>
        <div class="woot"></div>
        <div class="woot"></div>
        <div class="woot"></div>
    </div>
    <div class="img_container">
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
    </div>

这个想法是，当悬停第一个woot div时，它将显示第一个图像div，如果悬停在第二个图像div，它将显示第二个和其余的相同过程。

Answer 1

尝试以下代码：

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".woot").hover(
    function() {
      $(".image:eq(" + $(this).index() + ")").show();
    },
    function() {
      $(".image:eq(" + $(this).index() + ")").hide();
    }
  );
});

＆＃13;

.woot {
  width: 100px;
  height: 100px;
  background-color: black;
}
.image {
  width: 100px;
  height: 100px;
  background-color: blue;
  display: none;
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="woot"></div>
  <div class="woot"></div>
  <div class="woot"></div>
  <div class="woot"></div>
  <div class="woot"></div>
</div>
<div class="img_container">
  <div class="image">1</div>
  <div class="image">2</div>
  <div class="image">3</div>
  <div class="image">4</div>
  <div class="image">5</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<div class="container">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

//use css selection in jquery


 $('container span:nth-child(1))
 $('container span:nth-child(2))
 $('container span:nth-child(3))
 $('container span:nth-child(4))


I hope this will help you.

Answer 3

使用此解决方案，您必须将.img_container div设置为display:none。

CSS

.img_container div{display:none;}

的jQuery

$('.container div').on('mouseenter', function(){

  var indx = $(this).index();
  $('.img_container div').eq(indx).show();

})

$('.container div').on('mouseleave', function(){

  var indx = $(this).index();
  $('.img_container div').eq(indx).hide();

})

JSFIDDLE：http://jsfiddle.net/sz7am8Lt/。

---

使用此解决方案，您必须将.img_container div设置为visibility:hidden。

CSS

.img_container div{visibility:hidden;}

的jQuery

$('.container div').on('mouseenter', function(){

  var indx = $(this).index();
  $('.img_container div').eq(indx).css('visibility','visible');

})

$('.container div').on('mouseleave', function(){

  var indx = $(this).index();
  $('.img_container div').eq(indx).css('visibility','hidden');

})

JSFIDDLE：http://jsfiddle.net/sz7am8Lt/1/。