如果悬停在另一个重叠元素上，请保持鼠标悬停

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();
  }

Answer 1

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

Answer 2

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?

Answer 3

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>

Answer 4

使用(mouseenter)和(mouseleave)代替(mouseover)和(mouseout)