Question

在user-picker.component.scss中

.hover-highlight:hover{
    background-color: lightpink;
}

在user-picker.component.html文件中：

<tbody>
    <tr class='hover-highlight' *ngFor="let user of mf.data" (click)="select(user)">
        <td>{{''+user.name.firstName}}</td>
        <td>{{''+user.name.lastName}}</td>
    </tr>
</tbody>

悬停事件不会发生；但是，当我单击表格行时，它变成粉红色！

我用(click)="select(user)"更改了(click)="doSomething(event)"

doSomething(event){
   console.dir(event);
   console.log("in doSomething!");
}

该目录显示一个'MouseEvent'，其类型为：“ click”，符合预期。

我将(click)="doSomething(event)"更改为(mouseover)="doSomething(event)"，并且dir显示了一个'MouseEvent'，其类型为：“ mouseover”，与预期的一样； 但是，不希望这不是鼠标悬停时生成的，而是仅当我单击元素时生成的！

关于如何追踪如何防止我的悬停事件以及如何将click事件作为悬停事件传播的任何建议？同样，当我将鼠标移出时，css仍在应用（该行保持粉红色）。

对于一个答案，我很乐意接受一个答案，其中涵盖了如何跟踪事件发生的情况。 Firefox和Chrome均会发生此问题。

仅在单击时应用Angular 4（4.4.6）悬停伪类

0 个答案: