有没有办法检查元素是否有鼠标悬停？

Question

有没有办法检查元素是否有鼠标悬停？这样我就可以编写像isHovered ? a : b

这样的表达式

目前，我必须依赖此事件：(mouseenter)="isStarHover=true" (mouseleave)="isStarHover=false"

Answer 1

您可以尝试使用is()并检查选择器:hover。

var isHovered = $('#elem').is(":hover"); // returns true or false

Answer 2

我在组件中使用@HostListener。如果我需要处理特定元素，则使用带有指令（mouseenter）/（mouseleave）的问题的相同解决方案。

 @HostListener('mouseenter')
  public mouseenterListener(): void {
    this.hover = true;
  }

  @HostListener('mouseleave')
  public mouseleaveListener(): void {
    this.hover = false;
  }