在 hover 上显示图标？ Angular 2+

Question

I want the button to only show up on my hover on selected row? Here is my code: https://stackblitz.com/edit/inline-edit-change-edit2-j8b2jb?file=app%2Fapp.component.html

I want to show 'Edit' button only on hover item. Hover on one row example first name

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

Answer 1

If I understand your question correctly, basically you want the buttons to appear when you hover the input field. This is very simple to do with CSS, no need for JS for that.

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

 <div class="form-group"> <input placeholder="Hover over me" /> <div class="buttons"> <button>Edit</button> <button>Cancel</button> </div> </div>

Answer 2

Check on this code, Step 1: add class to edit button

<div class="form-group" [ngClass]="{'editing': editing.given_name}">
.
.
.
<button id="onToggleEdit-0" (click)="toggleEdit('given_name')">Edit</button>
.
.
.
</div>

Step 2: Add the following CSS to this component,

.form-group #onToggleEdit-0 {
    display: none;
}

.form-group:hover #onToggleEdit-0{
    display: inline-block;
} 

Add id value based on the row like how I did,

1st row -> onToggleEdit-0

2nd row -> onToggleEdit-1

etc...,,,