时间戳

首页 > 解决方案 > 如何将鼠标悬停在角度自动完成选项上

css - 如何将鼠标悬停在角度自动完成选项上

问题描述

我正在运行 Angular 应用程序，当我将鼠标悬停在自动完成垫选项上时，我有自动完成功能，我想查看整个客户编号和名称。我试着这样做

 <mat-form-field [style.cursor]="pointer" [style.cursor]="pointer" [style.width.px]=300  >
     <input class="selectCustomer" class="selectCustomerData" id="inputCustomer" matInput [matAutocomplete]="auto"  [formControl]="customerFilterControl" [(ngModel)]="customerName">
     <mat-icon matSuffix>keyboard_arrow_down</mat-icon>
       <p id="spandiv">{{customerName}}</p>  
     <mat-autocomplete dropdown-arrow="true" panelWidth ="450px" #auto="matAutocomplete" [displayWith] = "displayFn">
        <mat-option class="CustomerDropDown" *ngFor="let customer of filteredOptions | async"   [value] ="customer.AccountID +' '+'('+ customer.AccountName + ')'" (onSelectionChange)="onCustomerChange(customer)">
         {{customer.AccountID}} ({{customer.AccountName}})  <p id="spandiv1">{{customer.AccountID}} ({{customer.AccountName}})</p> 
        </mat-option>
    </mat-autocomplete>
  </mat-form-field>

在此处输入图像描述

基本上，当我将鼠标悬停在 mat-option 上时，我想看到价值

标签： cssangulartypescript

解决方案

一种简单的方法是将选项文本放在一个div带有小max-width. 然后设置该元素的样式，div以便通常隐藏溢出，但在悬停选项文本时不会。

示例：https ://stackblitz.com/edit/angular-vzfpjy

此解决方案的一个问题是用户必须将鼠标悬停在选项文本上才能显示完整值。

推荐阅读