gpt4 book ai didi

css - 设置按钮在悬停时出现

转载 作者:太空宇宙 更新时间:2023-11-03 20:06:36 24 4
gpt4 key购买 nike

我在 angular 4 material 表格单元格中有一个按钮,我只想在将鼠标悬停在表格行上时出现:

<md-cell *cdkCellDef="let row" contenteditable='false' > 
<div *ngIf="!row.editorEnabled" >{{row.goalStatusName}}
<button md-icon-button><md-icon (click)="row.editorEnabled=true;" mdTooltip="Edit">mode_edit</md-icon></button>
</div>
</md-cell>

我如何实现这一目标?

更新:完整代码:

<md-cell *cdkCellDef="let row" contenteditable='false' > 
<div *ngIf="!row.editorEnabled" >{{row.goalStatusName}}
<button md-icon-button><md-icon (click)="row.editorEnabled=true;" class="editButton" mdTooltip="Edit">mode_edit</md-icon></button>
</div>
<div *ngIf="row.editorEnabled" >
<md-input-container><input mdInput [(ngModel)]="row.goalStatusName" #goalName></md-input-container>
<button md-icon-button>
<md-icon (click)="modifyGoal(row.goalStatusId,row.goalStatusName)" mdTooltip="Save" style="color:green;font:bold;" >done</md-icon>
</button>
<button md-icon-button>
<md-icon (click)="row.editorEnabled=false" mdTooltip="Cancel" style="color:red;font:bold;" >clear</md-icon>
</button>
</div>
</md-cell>

最佳答案

button{ display:none}
md-cell:hover{

button{
display:block
}
}

关于css - 设置按钮在悬停时出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46022971/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com