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>