悬停时文本显示在另一个框中

Question

我正在尝试熟悉CSS Grid。因此，我创建了以下代码；）

我正在寻找一种解决悬停效果的方法。如果我将鼠标悬停在左侧，则相应的文本应出现在较大的右侧文本字段中，并在悬停结束后消失。

目前div之间没有通信。

我真的很感谢任何想法。

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr;
}

.box {
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;

}

.box .box {
  background-color: #fff;
  border-radius: 0;
}

.textInfo {
  grid-column: 2 / 4;
  grid-row: row 2;
}

.pastries{
  grid-column: 1 / 2;
  grid-row: row 2;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  background-color: #fff0;
}

.cupcake {
  grid-column: 1;
  grid-row:  1;
  background: white url(../img/024-cupcake.png);
}

.cheeseCake {
  grid-column: 2;
  grid-row: 1;
  background: white url(../img/014-cake.png);
}

.cookies {
  grid-column: 1;
  grid-row: 2;
  background: white url(../img/028-cookie.png);
}

.caramel {
  grid-column: 2;
  grid-row: 2;
  background: white url(../img/034-honey.png);
}

.chocolate {
  grid-column: 1;
  grid-row: 3;
  background: white url(../img/029-chocolate-bar.png);
}

.applePie {
  grid-column: 2;
  grid-row: 3;
  background: white url(../img/007-pie.png);
}

.peanutButterCups {
  grid-column: 1;
  grid-row: 4;
  background: white url(../img/017-cracker.png);
}

.doughnut {
  grid-column: 2;
  grid-row: 4;
  background: white url(../img/035-doughnut.png);
}

.iceCream {
  grid-column: 1;
  grid-row: 5;
  background: white url(../img/030-ice-cream.png);
}

.croissant {
  grid-column: 2;
  grid-row: 5;
  background: white url(../img/023-croissant.png);
}

.box .cupcake,
.cheeseCake,
.cookies,
.caramel,
.chocolate,
.applePie,
.peanutButterCups,
.doughnut,
.iceCream,
.croissant {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50px;
  height: 50px;
}

.box {
  background-color: #fff;
  color: #e8a4c9;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 10px;
}

.textInfo h2 {
  margin:0;
}

.innerText {
  margin: 10px;
}

h2 {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

p {
  font-weight: 400;
  line-height: 1.6;
}

.textInfo:hover {
  background-color: #e8a4c9;
  color: #fff;
}

.item:hover {
  background-color: #e8a4c9;
}

.pastries {
  background-color: #fff0;
  color: #e8a4c9;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 10px;
}

.textInfo {
  background-color: #fff;
  color: #e8a4c9;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 10px;
  margin: 10px;
}

@media (max-width: 720px) {
  .wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
  }

  .textInfo {
    grid-column: 1 / 5;
    grid-row: row 2;
  }

  .pastries{
      grid-column: 1 / 5;
      grid-row: row 1;
      display: grid;
      grid-gap: 10px;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      background-color: #fff0;
  }

  .cupcake {
  grid-column: 1;
  grid-row:  1;
  background: white url(../img/024-cupcake.png);
  }

  .cheeseCake {
  grid-column: 2;
  grid-row: 1;
  background: white url(../img/014-cake.png);
  }

  .cookies {
  grid-column: 3;
  grid-row: 1;
  background: white url(../img/028-cookie.png);
  }

  .caramel {
  grid-column: 4;
  grid-row: 1;
  background: white url(../img/034-honey.png);
  }

  .chocolate {
  grid-column: 5;
  grid-row: 1;
  background: white url(../img/029-chocolate-bar.png);
  }

  .applePie {
  grid-column: 1;
  grid-row: 2;
  background: white url(../img/007-pie.png);
  }

  .peanutButterCups {
  grid-column: 2;
  grid-row: 2;
  background: white url(../img/017-cracker.png);
  }

  .doughnut {
  grid-column: 3;
  grid-row: 2;
  background: white url(../img/035-doughnut.png);
  }

  .iceCream {
  grid-column: 4;
  grid-row: 2;
  background: white url(../img/030-ice-cream.png);
  }

  .croissant {
  grid-column: 5;
  grid-row: 2;
  background: white url(../img/023-croissant.png);
  }

  .box .cupcake,
  .cheeseCake,
  .cookies,
  .caramel,
  .chocolate,
  .applePie,
  .peanutButterCups,
  .doughnut,
  .iceCream,
  .croissant {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 35px;
  height: 30px;
  }

  .innerText {
  font-size: 14px;
  margin: 5px;
  }

}

        <div class="wrapper">
          <div class="box textInfo"><h2>Please, select a category first!</h2>
          <div class="innerText innerText-cupCake"><h3>Cupcake</h3>
              <p>Ice cream fruitcake cotton candy. Fruitcake pudding gummi bears macaroon croissant dessert sweet roll. Jelly beans
                caramels chocolate cake bonbon liquorice soufflé soufflé sweet halvah.</p>
          </div>
          </div>
          <div class="box pastries">
            <div class="box item cupcake"></div>
            <div class="box item cheeseCake"></div>
            <div class="box item cookies"></div>
            <div class="box item caramel"></div>
            <div class="box item chocolate"></div>
            <div class="box item applePie"></div>
            <div class="box item peanutButterCups"></div>
            <div class="box item doughnut"></div>
            <div class="box item iceCream"></div>
            <div class="box item croissant"></div>
          </div>
        </div>