Patrickkx Patrickkx - 25 days ago 14
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

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>

Comments