Simple hover controls

Question

So I have few squares, and when I hover over one, i want a menu to show up. Then, when I hover out, i want it to disappear. Simple right?

So the problem is when I move my mouse very fast over them, some of them stay... hidden. I can resign from squares going transparent, but my mouseout event is not fired right too.. because my mouse is far away, and my black menu is still on top of a square!

So fading out pink squares is more to show the issue. I am most troubled by black square not disappearing.

$(document).ready(function() {
  $('.square').mouseenter(faceon);
  $('#hover_controls').mouseleave(faceout);
});

function faceon() {
  $(this).stop().clearQueue().fadeTo("slow", 0.15);
  $('#hover_controls').stop().clearQueue().css({
    top: $(this).offset().top + "px",
    left: $(this).offset().left + "px",
    display: 'block'
  }).fadeTo("fast", 1);
}

function faceout(event) {
  var e = event.toElement || event.relatedTarget;
  if (e.parentNode == this || e == this) {
    return;
  }
  $('.square').stop().clearQueue().fadeTo("slow", 1);
  $('#hover_controls').stop().clearQueue().fadeTo("fast", 0, function() {
    $(this).hide();
  });
}

.square {
  height: 72px;
  width: 72px;
  background: pink;
  margin: 5px;
  display: inline-block;
}

#hover_controls {
  display: none;
  height: 62px;
  width: 62px;
  opacity: 0;
  padding: 5px;
  position: fixed;
  background: #000;
  border-radius: 10px;
  z-index: 2;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='hover_controls'>
  <a href='#' onclick='alert("aaa");'>a</a>
  <a href='#' onclick='alert("bbbb");'>b</a>
</div>

<div class="list">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

Any ideas?

I hope using `mouseenter` and `mouseleave` instead of `mouseover` and `mouseout` improves the results. — Waleed Iqbal, Jan 26 '18 at 20:12
Using `mouseenter` and `mouseleave` seemed to fix it for me. — MisterMystery, Jan 26 '18 at 20:14
mouseout is just not that reliable. It's been a nuisance for a long time. https://stackoverflow.com/questions/7448468/why-cant-i-reliably-capture-a-mouseout-event — zfrisch, Jan 26 '18 at 20:16
FWIW { Error: "message": "TypeError: e is null", when run this. — Mark Schultheiss, Jan 26 '18 at 20:34

score 0 · Answer 1 · answered Jan 26 '18 at 20:16

0

Replace mouseover and mouseout with mouseenter and mouseleave respectively. I hope this helps.

answered Jan 26 '18 at 20:16

Waleed Iqbal

1,308
19
35

changed to `mouseenter` and `mouseleave`, and it still happens. – Kedor Jan 26 '18 at 20:37

Mark Schultheiss · Answer 2 · 2018-01-27T16:16:46.077

Change the event handler, fix issue wtih e in the conditional if mouse out fast where e is null.

The complication here is the mouseenter/mouseleave and the animation - note that those events are on different elements, one of which you show/hide when the events trigger. Thus it is likely the mouseleave event does not properly trigger ALL the time due to the element it is hooked to not being visible on a "fast mouse" action behavior.

$(document).ready(function() {
  $('.square').on("mouseenter", faceon);
  $('#hover_controls').on("mouseleave", faceout);
});

function faceon() {
  $(this).stop().clearQueue().fadeTo("slow", 0.15);
  $('#hover_controls').stop().clearQueue().css({
    top: $(this).offset().top + "px",
    left: $(this).offset().left + "px",
    display: 'block'
  }).fadeTo("fast", 1);
}

function faceout(event) {
  var e = event.toElement || event.relatedTarget;
  if (e && (e.parentNode == this || e == this)) {
    return;
  }
  $('.square').stop().clearQueue().fadeTo("slow", 1);
  $('#hover_controls').stop().clearQueue().fadeTo("fast", 0, function() {
    $(this).hide();
  });
}

.square {
  height: 72px;
  width: 72px;
  background: pink;
  margin: 5px;
  display: inline-block;
}

#hover_controls {
  display: none;
  height: 62px;
  width: 62px;
  opacity: 0;
  padding: 5px;
  position: fixed;
  background: #000;
  border-radius: 10px;
  z-index: 2;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='hover_controls'>
  <a href='#' onclick='alert("aaa");'>a</a>
  <a href='#' onclick='alert("bbbb");'>b</a>
</div>

<div class="list">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

Seems it sill happends: https://imgur.com/a/MX982 - maybe i just should make it from scratch, some other way? If I fly my mouse over them from one side to the other, it gets stuck. And i know people will do that. It fixes the error tho. — Kedor, Jan 26 '18 at 21:45
Added note regarding this. I would encourage you to search as there are other questions with regard to this google for "mouseenter mouseleave site:stackoverflow.com" — Mark Schultheiss, Jan 27 '18 at 16:11

Simple hover controls

2 Answers2