JS: Итерация через divs

Question

У меня есть 5 элементов div, все с классом = 'item'.

Im ловить их: var x = document.getElementsByClassName("item");

Теперь я хочу, чтобы исчезнуть, что DIV, который был mouseovered.

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

Но это не работает, как это должен делать. Потому что все элементы исчезают, а не только то, что зависало.

Редактировать: Моя точка зрения в том, что появляются modal ДИВ (розовый квадратик), когда item ДИВ наведен. Посмотрите новый 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>