Components: mat-expansion-panel-header :hover style sticks after expansion

[chrisrrowland]

Bug, feature request, or proposal:

If you use a custom style for the header, the hover style should go away after you click to expand a panel and mouse away.

What is the expected behavior?

After expanding the original style returns

What is the current behavior?

When you mouse over the header to expand, the hover style is applied. When you expand and mouse away it stays until you click something else or perform some other sort of action on the page.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-ojcyga

Is there anything else we should know?

Maybe this is not how you are intended to override the default style. If so I'm not sure how that might be made more clear.

[jingleleung]

I found a simple workaround by setting the header background colors to !important

.header {
  background-color: #e4e1df !important;
}

.header:hover {
  background-color: #ffcb05 !important;
}

[crisbeto]

Closing since this is an issue with the custom styling, rather than Material.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}