html - 悬停效果处于活动状态时如何显示垂直文本

Question

我在一个业余网站上工作，我创建了 2 个<div>（2 个矩形）相互重叠，当悬停处于活动状态时，我还想在下部显示垂直文本，<div>但我尝试了不同的方法，但不知道如何制作发生。

#rectangle2 {
  background-color: #fd9e0e;
  width: 700px;
  height: 500px;
  margin-left: 0px;
  opacity: 1;
  transition: 0.73s;
}

#rectangle {
  width: 650px;
  height: 500px;
  background-color: #147906;
}

#rectangle text {
  display: none;
  text-transform: uppercase;
  font-size: 18px;
  margin-left: 0px;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

#rectangle2:hover {
  margin-left: 70px;
}

#rectangle2:hover text {
  display: block;
}

<div id="rectangle">
  <text>SUMMER</text>
  <div id="rectangle2"></div>
</div>

标签： htmlcsstexthover

Answer 1

只需将显示文本的悬停从矩形 2 更改为矩形。

#rectangle:hover text {
  display: block;
}

并且还将 更改writing-mode为vertical-lr。