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

【问题标题】：How to show a vertical text when an hover effect is active悬停效果处于活动状态时如何显示垂直文本
【发布时间】：2020-11-15 07:43:27
【问题描述】：

我在一个业余网站上工作，我创建了 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>

【问题讨论】：

我假设您的意思是“仅使用 HTML 和 CSS 显示文本”？因为你可以使用 JavaScript

标签： html css text hover

【解决方案1】：

#rectangle2:hover text { display: block;}

应该是

#rectangle2:hover ~ text { display: block;}

它是~

【讨论】：

【解决方案2】：

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

#rectangle:hover text {
  display: block;
}

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

【讨论】：

【解决方案3】：

您可以为此使用动画关键帧。此外，我还向悬停元素元素添加了绝对位置。我还使用了不透明度而不是显示。使用关键帧动画可以在悬停时在文本中提供平滑的缓动效果。

#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 {
  opacity: 0;
  text-transform: uppercase;
  font-size: 18px;
  margin-left: 0px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  position: absolute;
}

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

#rectangle:hover text {
  -webkit-animation: show .73s ease-in-out;
  -moz-animation: show .73s ease-in-out;
  -o-animation: show .73s ease-in-out;
  animation: show .73s ease-in-out;
  opacity: 1;
}

@-webkit-keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-moz-keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-o-keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

【讨论】：

【解决方案4】：

您选择了您需要选择的项目下方的项目。

在这种情况下，您必须选择包装器元素 #rectangle，然后设置其中的 #rectangle2 和 text 应该发生什么

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

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

#rectangle text {
    /* display: none; */
    text-transform: uppercase;
    font-size: 18px;
    margin-left: 0px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

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

#rectangle:hover text {
    /* display: block; */
    opacity: 1;
}

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

【讨论】：