如何实现Material展开面板鼠标悬停展开及自动收起？

嘿，这个需求我刚好折腾过，给你两种可行的实现方案，分别用CSS和TypeScript来搞定👇

这种方式不用动组件代码，靠CSS伪类和Material组件的内置样式就能实现，但要注意它的局限性——如果鼠标移到展开后的面板内容上，只要离开面板整体区域就会收起，适合简单场景。

首先，你的面板已经加了expansion-panel-class类，直接在全局样式或者组件样式里加下面的代码：

/* 可选：隐藏默认的展开/收起箭头，因为我们用hover触发 */
.expansion-panel-class .mat-expansion-panel-header-description,
.expansion-panel-class .mat-expansion-indicator {
  display: none;
}

/* 鼠标悬停时强制展开面板 */
.expansion-panel-class:hover {
  .mat-expansion-panel-content {
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* 模拟expanded状态的头部样式 */
  .mat-expansion-panel-header {
    border-bottom: 1px solid rgba(0,0,0,.12);
  }
}

/* 给内容添加过渡动画，避免展开收起太生硬 */
.expansion-panel-class .mat-expansion-panel-content {
  transition: all 0.3s ease;
  height: 0 !important;
  visibility: hidden;
  opacity: 0;
}

原理是通过:hover伪类覆盖默认的内容隐藏样式，同时加上过渡动画让效果更流畅。如果不需要隐藏箭头，把前一段代码删掉就行。

如果需要更复杂的逻辑（比如鼠标移到展开的内容上时不收起，或者延迟收起），用TypeScript的方式更靠谱。

步骤1：修改HTML模板 #

给mat-expansion-panel添加模板引用变量，绑定mouseenter和mouseleave事件：

<mat-expansion-panel 
  class="expansion-panel-class"
  #hoverPanel
  (mouseenter)="expandPanel(hoverPanel)"
  (mouseleave)="collapsePanel(hoverPanel)"
>
  <mat-expansion-panel-header> .... </mat-expansion-panel-header>
  <mat-list> <!-- my elements --> </mat-list>
</mat-expansion-panel>

步骤2：在组件类中实现方法 #

在你的组件.ts文件里添加两个方法，用来控制面板的展开和收起：

import { MatExpansionPanel } from '@angular/material/expansion';

// ... 其他组件代码

expandPanel(panel: MatExpansionPanel): void {
  panel.expanded = true;
}

collapsePanel(panel: MatExpansionPanel): void {
  // 可选：添加延迟，避免鼠标不小心移开就立即收起
  setTimeout(() => {
    panel.expanded = false;
  }, 300);
}

如果需要鼠标移到展开后的内容上也保持展开状态，可以把事件绑定到整个面板的容器上，或者给内容区域加mouseenter事件来取消延迟收起的定时器，基础版的代码已经能满足你的核心需求。

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