Question

我有一个类似下面的DOM结构。这些元素是重叠的。在悬停时，视频开始播放。不幸的是，当我将鼠标悬停在.showsOnHover上时，mouseover和mouseout会一个接一个地重复点火，导致.showsOnHover眨眼和视频卡顿。

我该怎么做才能指示浏览器将鼠标悬停在<video (mouseover)="mouseover()" (mouseout)="mouseout()"></video> <div [hidden]="!hovering" class="showsOnHover"></div>上作为一个连续的悬停？

.html

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

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

.TS

{{1}}

Answer 1

问题在于，当显示showsOnHover时，它会覆盖视频，这会使鼠标停止，因此它会隐藏div，然后悬停事件再次触发，并显示div，它只是循环一遍又一遍地快速。

您基本上希望执行以下操作之一：

将mouseover和mouseout事件放在视频和 showsOnHover元素上，也许在包含父div元素上执行。这样，mouseout事件在显示时就不会被触发;相反，它只会在您离开较大的包含元素时触发。
将pointer-events: none;添加到CSS中的.showsOnHover班级。这使div对鼠标事件透明。但是，如果您想从该按钮上运行任何点击事件，这可能会导致问题。
如Ram's answer

mouseover

mouseenter

Answer 2

使用mouseenter代替mouseover

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

  }

[。mouseover（）]会因事件冒泡而导致许多麻烦。对于例如，当鼠标指针在此内部元素上移动时例如，鼠标悬停事件将被发送到该事件，然后涓涓细流外。这可以在inopportune触发我们绑定的mouseover处理程序倍。有关有用的替代方法，请参阅.mouseenter（）的讨论。

请参阅What is the difference between the mouseover and mouseenter events?

Answer 3

创建一个父div并在其上触发相同的事件，

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

如果将鼠标悬停在另一个重叠元素上，请将鼠标置于活动状

3 个答案: