在悬停时显示单个按钮？角 2+

Question

我希望该按钮仅在悬停在选定行上时显示？这是我的代码：https://stackblitz.com/edit/inline-edit-change-edit2-j8b2jb?file=app%2Fapp.component.html

我只想在悬停项目上显示“编辑”按钮。将鼠标悬停在一行示例名字上

这里的问题是我只想看到悬停按钮而不是每个人。

  <div class="form-group" [ngClass]="{'editing': editing.given_name}">
    <label for="number">First Name</label>
    <input  
      type="text"
      class="form-control"
      formControlName="given_name"
      id="given_name"
      placeholder="Jane"
    />
    <div class="value">{{user.given_name}}</div>
    <button (click)="toggleEdit('given_name')">Edit</button>
    <button (click)="accept('given_name')">Accept</button>
     <button (click)="toggleCancel('given_name')">Cancel</button>
  </div>


  <div class="form-group" [ngClass]="{'editing': editing.family_name}">
    <label for="street">Last Name</label>
    <input
      
      type="text"
      class="form-control"
      formControlName="family_name"
      id="family_name"
      placeholder="Doe"
    />
    <div class="value">{{user.family_name}}</div>
    <button (click)="toggleEdit('family_name')">Edit</button>
    <button (click)="accept('family_name')">Accept</button>
    <button (click)="toggleCancel('family_name')">Cancel</button>
  </div>

Answer 1

尝试将其添加到您的 CSS https://stackblitz.com/edit/inline-edit-change-edit2-9sk2xn?file=styles.css

.form-group button {
  display: none;
}
.form-group:hover button {
  display: inline-block;
}