keep mouse over active if hovering over another overlapping element

Question

I've got a DOM structure like the one below. These to elements are overlaping. On hover, video start to play. Unfortunately, when I hover over .showsOnHover, mouseover and mouseout repeatedly fire one after another making .showsOnHover blink and video stutter.

What should I do to instruct browser to treat hovering over .showsOnHover as one continuous hover?

.html

  <video (mouseover)="mouseover()" (mouseout)="mouseout()"></video>
  <div [hidden]="!hovering" class="showsOnHover"></div>

.ts

  mouseover(e){
    this.hovering = true;
    this.video.play();

  }
  mouseout(e){
    this.hovering = false;
    this.video.stop();
  }

Matt Fletcher · Accepted Answer · 2017-11-23T17:19:16.923

The issue is that when showsOnHover is shown, it covers up the video, which makes it mouseout, so it hides the div, then the hover event triggers again, and it shows the div, and it just loops over and over very rapidly.

You essentially will want to do one of the following:

Put the mouseover and mouseout events on both the video and the showsOnHover elements, perhaps do it on a containing parent div element. This way the mouseout event won't be triggered when it's shown; instead it will only trigger when you leave the larger containing element.
Add pointer-events: none; to your .showsOnHover class in the CSS. This makes that div transparent to mouse events. However, this could cause issues if you wanted to run any click events off that button.
Change mouseover to mouseenter as mentioned in Ram's answer

That `pointer-events: none;` just saved my day. Thank you! – Liviu Ilea Oct 18 '21 at 14:50 — Liviu Ilea, Oct 18 '21 at 14:50

score 1 · Answer 2 · edited Nov 23 '17 at 17:16

Use mouseenter instead of mouseover

mouseenter(e){
    this.hovering = true;
    this.video.play();

  }

[.mouseover()] can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the Inner element in this example, a mouseover event will be sent to that, then trickle up to Outer. This can trigger our bound mouseover handler at inopportune times. See the discussion for .mouseenter() for a useful alternative.

Please see What is the difference between the mouseover and mouseenter events?

score 1 · Answer 3 · answered Nov 23 '17 at 17:16

1

create a parent div and fire the same event on that,

<div class="parentDiv" (mouseenter)="mouseover()" (mouseleave)="mouseout()">
  <video></video>
  <div [hidden]="!hovering" class="showsOnHover"></div>
</div>

answered Nov 23 '17 at 17:16

Sultan Khan

308
2
11

score 0 · Answer 4 · answered Oct 12 '21 at 13:37

0

Use (mouseenter) and (mouseleave) instead of (mouseover) and (mouseout)

answered Oct 12 '21 at 13:37

Muhammed Jawad

38
7

keep mouse over active if hovering over another overlapping element

4 Answers4