如何将平滑替换添加到网格容器中的div？

<style>
  .grid-container {
    display: grid;
    grid-template-areas: 
      "header header header"
      "sidebar content content"
      "footer footer footer";
    grid-gap: 10px;
  }

  .header {
    grid-area: header;
    background-color: #f1f1f1;
    transition: background-color 0.5s ease;
  }

  .content {
    grid-area: content;
    background-color: #ffffff;
    transition: background-color 0.5s ease;
  }

  .footer {
    grid-area: footer;
    background-color: #f1f1f1;
    transition: background-color 0.5s ease;
  }

  .grid-container:hover .header,
  .grid-container:hover .content,
  .grid-container:hover .footer {
    background-color: #dddddd;
  }
</style>

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>