鼠标悬停时展开材质扩展面板答案

【问题标题】：Expand material expnsion panel on mouseover鼠标悬停时展开材质扩展面板
【发布时间】：2018-10-05 14:50:26
【问题描述】：

我的应用程序中有一个材质扩展面板。当您将鼠标悬停在面板上时，我想展开面板，如果您再次离开，我也想自动折叠。这可以在 my.css 文件中实现吗？或者我是否必须在我的打字稿中这样做以及如何做？

这是我的html：

    <mat-expansion-panel class="expansion-panel-class">
<mat-expansion-panel-header>
....
</mat-expansion-panel-header>
<mat-list>
<!-- my elements -->
</mat-list>
</mat-expansion-panel>

还有我的css：

.expansion-panel-class{
    /*Expansion panel is collapsed*/
}

.expansion-panel-class :hover{
    /*Expansion panel is expanded*/
}

提前致谢！

【问题讨论】：

标签： html css angular typescript angular-material

【解决方案1】：

您也可以在 HTML 模板中执行此操作。事实上，这是 Angualr 团队推荐的（将视图逻辑保存到模板中）。

只需使用局部变量和事件绑定。

<mat-expansion-panel 
  class="expansion-panel-class" 
  #panel 
  (mouseenter)="panel.open()"
  (mouseleave)="panel.close()"
>

【讨论】：