Javascript 角度2:touchStart和touchEnd在移动视图中未正确响应

在css中，我们有悬停属性，所以要在移动视图中应用悬停，我尝试应用touchstart和touchend事件。但事件并没有得到正确的响应

以下是我的两项活动

 @HostListener('touchstart', ['$event']) onTouchStart(event: Event): void {
    if (event) {
      event.preventDefault();
    }
    let part = this.el.nativeElement.querySelector('.icon-interface-question-mark');
    this.renderer.setElementStyle(part, 'color', 'green');
  }



  @HostListener('touchend', ['$event']) onTouchEnd(event: Event): void {
    if (event) {
      event.preventDefault();
    }
    let part = this.el.nativeElement.querySelector('.icon-interface-question-mark');
    this.renderer.setElementStyle(part, 'display', 'yellow');
  }

下面是我的css

.account-outlook-wrapper {
  .icon-interface-question-mark {
    color: yellow;
    position: relative;
    cursor: pointer;

    &:hover {
      color: green;
    }
  }

为了检查它，我将普通css更改为

.account-outlook-wrapper {
      .icon-interface-question-mark {
        color: orange;
        position: relative;
        cursor: pointer;

        &:hover {
          color: red;
        }
      }

---

但由于touchstart事件，窗口浏览器中的颜色为绿色，尽管它本应仅适用于移动视图。如果我没有正确使用这两个事件，请告知我触摸事件工作正常

还有其他问题（不是CSS或事件）：

Renders2中没有

setElementStyle

方法。使用setStyle

您尝试将

黄色

颜色设置为

显示

的值。但是

display

不接受颜色

---

查看此示例：

我无法看到ipad和ipad pro中的ontouchstart和ontouchend更改，它在其他移动设备中运行良好