JS：通过div迭代

Question

我有5个div元素，都有class ='item'。

我抓住他们：var x = document.getElementsByClassName("item");

现在我想让那个被遗忘的div消失。

https://jsfiddle.net/LqsLbrco/1/

但它没有按照预期的那样发挥作用。因为所有元素都在消失，不仅仅是这个元素在徘徊。

修改：我的观点是当modal div悬停时item div出现（粉红色框）。看看新的jsfiddle：https://jsfiddle.net/LqsLbrco/10/

蓝框后面有一个div，我想让他在用户盘旋蓝框时出现。

Answer 1

如果你在jQuery中这样做，你可以这样做。

修改标记以满足要求。

＆＃13;

＆＃13;

$(function() {
  $(".container .item").bind("mouseover", function(event) {
    $(event.target).find(".modal").show();
  });

  $(".container .modal").bind("mouseleave", function(event) {
    $(event.target).hide();
  })
});

＆＃13;

.item {
  height: 100px;
  width: 100px;
  background-color: blue;
  display: inline-block;
  margin: 5px;
}
.container {
  display: inline-block;
}
.modal {
  height: 100px;
  width: 100px;
  background-color: pink;
  display: inline-block;
  margin: 0px;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="item">
    <div class="modal"></div>
  </div>
</div>
<div class="container">
  <div class="item">
    <div class="modal"></div>
  </div>
</div>
<div class="container">
  <div class="item">
    <div class="modal"></div>
  </div>
</div>
<div class="container">
  <div class="item">
    <div class="modal"></div>
  </div>
</div>
<div class="container">
  <div class="item">
    <div class="modal"></div>
  </div>

＆＃13;

＆＃13;

＆＃13;