Patrickkx Patrickkx - 1 year ago 68
Javascript Question

JS: Iterate through divs

I have 5 div elements, all with class='item'.

Im catching them with:

var x = document.getElementsByClassName("item");


Now I want to make disappear that div, which was mouseovered.

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

But it doesn't work as it supposed to do. Because all elements are disappearing, not only this which was hovered.

Edit: My point is that the
modal
div appear (the pink box) when the
item
div is hovered. Check out the new jsfiddle: https://jsfiddle.net/LqsLbrco/10/

There's a div behind the blue boxes, I want him to appear when the user hovers the blue box.

Answer Source

If you do it in jQuery, you could just do this.

Modified the markup to accommodate the requirements.

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