<tr>上的“如何添加”鼠标悬停和鼠标移出？

Question

我有一张桌子，我需要三个不同的链接来显示鼠标悬停在的特定行上。链接为“查看”，“编辑”和“立即触发”。 我只需要在会话表上发生此事件。 这是我当前的HTML：

<div>
    <h1>Manage Workflows</h1>
</div>
<div class="tablez">
        <table class="table table-hover" id = "groups">
            <thead>
                <tr>
                <th scope="col">Groups</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor = "let row of rows" (click) = "onRowClick(row.id)">
                    <td class="data">{{row.group}}</td>            
                </tr>

            </tbody>
        </table>
        <table class="table" id = "sessions">
                <thead>
                    <tr>
                    <th scope="col">Sessions</th>
                    <th scope="col" id = "trigger">Next Trigger</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor = "let row of tableTwo">
                        <td scope="row">{{row.session}}</td>
                        <td scope="row" id = "trigger" >{{row.nextTrigger}}</td>                 
                    </tr>

                </tbody>
            </table>
    </div>

Answer 1

您可以使用角度的鼠标悬停事件

 <tr *ngFor = "let row of tableTwo" (mouseover)="showLinks=true" (mouseout)="showLinks=false" >
                        <td scope="row">{{row.session}}</td>
                        <td scope="row" id = "trigger" >{{row.nextTrigger}} </td>
    <td   *ngIf="!showLinks" scope="row"> View  Edit   Trigger Now links  </td>     
 </tr>