角垫输入垫图标隐藏显示

Question

我的代码我有一个带有垫子图标的输入，允许清除每次存在值时显示图标的字段。

我想要做的是当有一个值时不显示图标，而只有当我将鼠标悬停在它上面时。

提前致谢。

html

 <mat-form-field appearance="fill">
  <mat-label>Clearable input</mat-label>
  <input matInput type="text" [formControlName]="controller">
    <mat-icon matSuffix *ngIf="controller.value" class="iconDisplay" (click)="clearInput()">highlight_off</mat-icon>
</mat-form-field>

ts

export class testComponent {
  @Input() public controller: AbstractControl;


 clearInput() {
  this.controller.setValue(null)
 }
}

scss

.iconDisplay {
 visibility: hidden
}

input:hover > .iconDisplay {
 visibility: visible
}

Answer 1

你使用类似的东西：

<input ... [ngClass.iconDisplay]="showIcon" (mouseover)="showIcon=true" (mouseout)="showIcon=false"

Answer 2

我有一个类似的用例，我是这样做的：

HTML：

<div class="clearableInput">
    <mat-form-field appearance="fill">
        <mat-label>Clearable input</mat-label>
        <input matInput type="text" [formControlName]="controller">
        <div class="iconDisplay">
            <mat-icon matSuffix *ngIf="controller.value" class="iconDisplay" (click)="clearInput()">highlight_off</mat-icon>
        </div>
    </mat-form-field>
</div>

CSS：

.clearableInput{
  &:hover {
    .iconDisplay {
      display: block !important;
    }
  }
}
.iconDisplay {
  display: none;
}    

希望这可以帮助！ :)