JS：divを繰り返し処理する

Question

5つのdiv要素があり、すべてclass = 'item'です。それらを引く

イム：var x = document.getElementsByClassName("item");

は今、私はmouseoveredたことのdivを、消えるようにしたいです。

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

しかし、それが行うことになって、それは動作しません。すべての要素が消えているので、それだけでなく、ぶらさがった。

編集：私のポイントはitem div要素が推移したときmodalのdivは（ピンクボックス）が表示されていることです。新しいjsfiddleをチェックしてください：https://jsfiddle.net/LqsLbrco/10/

青いボックスの後にdivがあります。ユーザーが青色のボックスの上を移動すると、彼が表示されます。

Answer 1

jQueryで行う場合は、これを行うだけです。

要件を満たすためにマークアップを変更しました。

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

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

.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; 
 
}

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