在鼠标上方展开“材质扩展”面板

我的应用程序中有一个材料扩展面板。当你将鼠标悬停在面板上时,我想展开面板,如果你再次离开,我想自动折叠面板。这是否可以在我的中实现。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*/
}

提前感谢!