Развернуть панель расширения материала при наведении мыши

Question

В моем приложении есть панель расширения материала. Я хотел бы расширить панель, когда вы наводите курсор мыши на панель, а также автоматически свернуть ее, если вы снова уйдете. Возможно ли это реализовать в файле 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*/
}

Заранее спасибо!

Answer 1

Также вы не можете сделать это в своем HTML-шаблоне.Фактически, это рекомендуется командой Angualr (удерживая логику представления в шаблоне).

Просто используйте локальные переменные и привязки событий.

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