设置按钮在悬停时出现 [英] set button to appear on hover

问题描述

我在 angular 4 材质表格单元格中有一个按钮，我只想在悬停在表格行上时出现该按钮:

</md-cell>

我如何实现这一目标?

更新:完整代码:

<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;">完成</md-icon><button md-icon-button><md-icon (click)="row.editorEnabled=false" mdTooltip="Cancel" style="color:red;font:bold;">清除</md-icon>

</md-cell>

解决方案

button{ display:none}md-cell:悬停{按钮{显示:块}}

I have a button in angular 4 material table cell that I'd like to appear only when hover on table row:

<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>

How do I achieve this?

Update: Entire code:

<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
  }
}

这篇关于设置按钮在悬停时出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！