你的问题是你有一个元素坐在你的“嘿”之上。即使你的第三个矩形有一个透明的背景，它仍然在浏览器的眼睛。这意味着，当它看起来像你悬停在“嘿”，你实际上是悬停在你的透明背景和浏览器没有得到的信号，“嘿”是被悬停。
根据你的最终目标是什么，一个解决方案是将他们“嘿”移动到第三个矩形。
替换第三个div的HTML。

<div style="background-color: #48bfe3" class="hey">
    <span class="text">Hey</span>
</div>

CSS可以替换#hey的所有样式。

.hey {
  /* styling the text */
  color: white;
  font-family: "Open Sans", sans-serif;
  font-size: 3em;
  text-transform: uppercase;
  /* aligning the text */
  display: flex;
  align-items: center;
  justify-content: center;
}
.hey:hover {
  background-color: transparent;
}
.hey .text {
  display: none;
}
.hey:hover .text {
  display: inline;
}
.hey .text:hover {
  color: red;
}

你可以在this CodePen中看到整个过程。

#hey元素的悬停功能不起作用，因为周围的div上已经有一个活动的悬停。
换句话说，只有将鼠标悬停在周围的div上，才能访问#hey元素。在这一点上，你试图触发一个额外的悬停，浏览器只是忽略。
如果移除div悬停，您将看到#hey悬停工作。

body {
  font-family: "Open Sans", sans-serif;
  height: 3000px;
  margin: 0;
}

h1 {
  text-align: center;
}

#container {
  background-color: #003049;
  width: 90%;
  height: 500px;
  margin: 0 auto;
  border: 5px solid #003049;
  position: relative;
}

.header {
  position: fixed;
  display: flex;
  width: 90%;
  height: 500px;
}

.header div {
  width: 100%;
  height: 100%;
  transition: all 0.2s;
}

#hey {
  color: white;
  font-family: "Open Sans", sans-serif;
  font-size: 3em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#hey:hover {
  color: red;
}

<h1>Trying something page</h1>

<section id="container">
  <div id="hey">HEY</div>
  <div class="header">
    <div style="background-color: #80ffdb"></div>
    <div style="background-color: #64dfdf"></div>
    <div style="background-color: #48bfe3"></div>
    <div style="background-color: #5390d9"></div>
    <div style="background-color: #6930c3"></div>
  </div>
</section>

如果可以选择，请重新构造HTML。尝试将#hey元素嵌套在div中。