mat-icon元素hover伪类与cursor:pointer失效问题求助

核心原因 #

1. 父容器的-webkit-app-region: drag属性（用于Electron窗口拖拽）会拦截子元素的鼠标事件，导致hover和cursor样式无法触发。
2. Angular组件默认的样式封装机制，可能让你的CSS选择器无法正确命中mat-icon元素。

具体修复步骤 #

1. 解除拖拽区域对交互的拦截 #

给mat-icon所在的外层div添加-webkit-app-region: no-drag，让这个区域不参与窗口拖拽，恢复鼠标事件响应：

<div class="recorder-ctrl-container" fxLayout="row" style="width:400px;height:70px;background-color: #22252B;border-radius: 3px;-webkit-app-region: drag;">
  <div fxFlex="30" style="display: flex;justify-content: center;align-items: center;">
    <!-- 添加no-drag属性解除拖拽拦截 -->
    <div style="-webkit-app-region: no-drag;">
      <mat-icon style="cursor: pointer;" matTooltip="Pause" matTooltipPosition="right">pause</mat-icon>
    </div>
  </div>
</div>

2. 确保hover样式生效 #

根据Angular的样式封装规则，二选一即可：

• 方案一：组件内使用样式穿透
  在组件的CSS/SCSS文件中添加::ng-deep穿透封装：

  ::ng-deep .recorder-ctrl-container mat-icon:hover {
    color: white;
  }
  

• 方案二：放到全局样式文件
  将hover样式移到项目根目录的styles.css（或styles.scss）中，全局样式不受组件封装限制：

  .recorder-ctrl-container mat-icon:hover {
    color: white;
  }
  

3. 确保cursor样式生效 #

如果inline的cursor: pointer被其他样式覆盖，可在样式文件中提高优先级：

.recorder-ctrl-container mat-icon {
  cursor: pointer !important;
}

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