Angular中如何为select选项绑定mousehover事件？

原生HTML的<select>下拉控件里的<option>元素，是由浏览器原生UI渲染的，大部分浏览器不会把mouseover这类鼠标事件传递给<option>，所以你绑定的事件根本不会触发。

解决办法 #

方案1：用Angular UI组件库（以Angular Material为例） #

Angular Material的mat-select是基于常规DOM元素实现的下拉组件，完全支持给选项绑定鼠标悬停事件。

先确保项目中已引入Angular Material的Select模块，然后写如下代码：

<mat-form-field>
  <mat-label>选择音效</mat-label>
  <mat-select formControlName="DefaultNotificationAlert">
    <mat-option *ngFor="let option of soundList" [value]="option" (mouseenter)="playSound(option)">
      {{option}}
    </mat-option>
  </mat-select>
</mat-form-field>

组件类里的播放方法：

playSound(soundName: string) {
  // 根据你的音效文件路径调整
  const audio = new Audio(`assets/sounds/${soundName}.mp3`);
  audio.play().catch(err => console.error('播放失败:', err));
}

方案2：手写自定义下拉列表 #

如果不想引入第三方库，自己用纯HTML+CSS+Angular实现一个自定义下拉，就能完全控制事件：

模板代码

<div class="custom-select" [class.open]="isDropdownOpen">
  <div class="select-trigger" (click)="isDropdownOpen = !isDropdownOpen">
    {{selectedSound || '请选择音效'}}
  </div>
  <div class="options-list" *ngIf="isDropdownOpen">
    <div class="option-item" 
         *ngFor="let option of soundList"
         (mouseenter)="playSound(option)"
         (click)="selectSound(option)">
      {{option}}
    </div>
  </div>
</div>

组件类代码

isDropdownOpen = false;
selectedSound: string | undefined;

playSound(soundName: string) {
  const audio = new Audio(`assets/sounds/${soundName}.mp3`);
  audio.play().catch(err => console.error('音效播放出错:', err));
}

selectSound(soundName: string) {
  this.selectedSound = soundName;
  this.isDropdownOpen = false;
  // 同步到表单控件
  this.yourFormGroup.get('DefaultNotificationAlert')?.setValue(soundName);
}

基础样式（可按需调整）

.custom-select {
  position: relative;
  width: 240px;
  font-size: 14px;
}
.select-trigger {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
}
.options-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1000;
}
.option-item {
  padding: 10px 12px;
  cursor: pointer;
}
.option-item:hover {
  background-color: #f8f9fa;
}

内容的提问来源于stack exchange，提问作者Samithra niroshana