JS：迭代通过div

Question

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

林赶上他们：var x = document.getElementsByClassName("item");

现在我想让消失该div，这是mouseovered。

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

但它应该做的这是行不通的。因为所有元素都消失了，不仅是这个被徘徊的东西。

编辑：我的观点是，modal DIV出现（粉红色框）当item 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>