Mouseover not working when element above target element

Question

I'm learning about mouse events. At the moment, my goal is to have 2 images on top of each other. For example, you move the mouse over an image and see a pop up. When you move the mouse away, the pop up goes. I think this is quite a common thing.

Because I have an image in front of the other, my research suggests I need to use mouseleave

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousemove_leave_out

The problem I have is that I get a flickering effect as I try to hide or remove the hide class (which makes the image visible or not)

This snippet shows everything

var inst = document.getElementById("instrument");
inst.addEventListener("mouseover", function() {
  toggleEdit(true);
})
inst.addEventListener("mouseleave", function() {
  toggleEdit(false);
})
var edit = document.getElementById("edit");
var i = 0;

function toggleEdit(isShow) {
  console.log(i++);
  edit.className = edit.className.replace(" hide", "");

  if (!isShow) {
    edit.className += " hide";
  }
}

.parent {
  position: relative;
  margin-left: 40%;
  background: green;
}

.image1 {
  position: absolute;
  top: 0;
  left: 0;
}

.image2 {
  position: absolute;
  top: 0px;
}

.image2 img {
  max-width: 20px;
}

.hide {
  visibility: hidden;
  display: block;
}

<div class="parent">
  <img class="image1" src="https://placehold.it/100" id="instrument" />
  <a id="edit" href="#" class="image2 hide"><img src="https://cdn.pixabay.com/photo/2017/06/06/00/33/edit-icon-2375785_960_720.png" /></a>
</div>

JSFIDDLE

How do I prevent this flickering?

You don't need JS at all for that. It can be achieved just with CSS using `:hover`. — Jeremy Thille, Jan 19 '18 at 15:38
... it can @JeremyThille? I didn't think a hover event on an element could affect the style of another element in CSS? — MyDaftQuestions, Jan 19 '18 at 15:40
Most popups aren't actually different elements or images moving over the other. As Jeremy says, they're just changes in css so the element never changes. — Shilly, Jan 19 '18 at 15:40
There's adjacent children selectors in css. Otherwise put the hover event on the parent element of both elements. `parent:hover childIdentifier`. — Shilly, Jan 19 '18 at 15:41

score 4 · Accepted Answer · answered Jan 19 '18 at 15:41

4

You don't need JS at all for that. It can be achieved just with CSS using :hover

.parent {
  position: relative;
  margin-left: 40%;
  background: green;
}
.parent:hover .image2{
    visibility: visible
}

.image1 {
  position: absolute;
  top: 0;
  left: 0;
}

.image2 {
  position: absolute;
  top: 0px;
  visibility: hidden;
}

.image2 img {
  max-width: 20px;
}

<div class="parent">
  <img class="image1" src="https://placehold.it/100" id="instrument" />
  <a id="edit" href="#" class="image2">
    <img src="https://cdn.pixabay.com/photo/2017/06/06/00/33/edit-icon-2375785_960_720.png" />
  </a>
</div>

answered Jan 19 '18 at 15:41

Jeremy Thille

26,047
12
43
63

I've been using CSS for years and never realised I could put the :hover at that position.... I've only ever done :hover as the last entry. This is amazing – MyDaftQuestions Jan 19 '18 at 15:45
Imagine what you will know tomorrow :) Also, please don't forget to validate the answer if you think it's worth it. – Jeremy Thille Jan 19 '18 at 15:47
Fair enough then. – Jeremy Thille Jan 19 '18 at 15:51
Whilst this doesn't answer the question, I get the feeling that I'm probably using the wrong technology for what I'm doing - CSS is the better choice, as such I'll mark this as the answer – MyDaftQuestions Jan 21 '18 at 10:22

score -1 · Answer 2 · answered Jan 19 '18 at 15:43

That seems like the expected behaviour to me. Once you have your mouseover the small image, then theoretically it is not over the big image so that why the small image disappears. And when that happens the mouseover effect is triggered again on the big image, putting it in a "loop". You could add the same logic to your small image as well solving your problem, but as mentioned above, the easier way to do it is with css.

var inst2 = document.getElementById("edit");
inst2.addEventListener("mouseover", function(){toggleEdit(true);})
inst2.addEventListener("mouseleave", function(){toggleEdit(false);})

Then how does it work https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousemove_leave_out ? Is it because the element in the middle (of the middle example in the link) is not an image? — MyDaftQuestions, Jan 19 '18 at 15:44

Mouseover not working when element above target element

2 Answers2