html - '如何添加'鼠标悬停和鼠标悬停?
问题描述
我有一个表格,我需要三个不同的链接才能显示在鼠标悬停的特定行上。链接是“查看”、“编辑”和“立即触发”。我需要此事件仅在会话表上发生。这是我当前的 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>
解决方案
您可以使用角度的鼠标悬停事件
<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>
推荐阅读
- c# - 如何在新游戏开始时使用“Don't Destroy On Load”销毁游戏对象
- flutter - 如何更改 VS CODE 的默认模拟器?
- excel - 如何在 VBA 用户窗体中处理 RefEdit 控件的空白/无效数据或如何检查 Range() 在 VBA 中是否有效/错误
- html - 将 SVG 元素与页面左侧对齐
- javascript - 为什么我的数字没有使用 '+=' 相加?
- c++ - CPP 控制台应用程序退出而不提供错误信息
- c# - Entity Framework Core - 自定义迁移停止工作
- matlab - 如何使用 MATLAB 为给定值绘制阶梯图?
- javascript - Curl 允许 POST 请求,但浏览器不允许
- python - 在 azure 上部署 django webapp 时出现“数据库已锁定”错误