如何在悬停效果处于活动状态时显示竖排文本

在悬停效果处于活动状态时显示竖排文本，可以通过CSS的transform属性和伪元素来实现。

首先，需要为悬停效果的元素添加一个class，例如"active"。然后，在CSS中定义该class的样式，包括悬停效果和竖排文本的样式。

.active {
  /* 悬停效果样式 */
  position: relative;
  /* 其他悬停效果样式，如背景色、边框等 */

  /* 竖排文本样式 */
  overflow: hidden;
}

.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 100%;
  background-color: #000;
  transform: rotate(-90deg);
  transform-origin: top left;
  pointer-events: none;
}

.active span {
  display: inline-block;
  transform: rotate(90deg);
  transform-origin: top left;
  white-space: nowrap;
}

上述代码中，通过为悬停效果的元素添加class "active"，可以触发悬停效果和竖排文本的样式。其中，使用伪元素::before创建一个竖条，通过transform属性将其旋转为竖排，同时设置transform-origin属性为左上角，使其从左上角开始旋转。通过pointer-events属性设置为none，使其不响应鼠标事件。然后，使用transform属性将竖排文本旋转为横向显示，同时设置transform-origin属性为左上角，使其从左上角开始旋转。最后，通过white-space属性设置为nowrap，使文本不换行。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

• 腾讯云云服务器（CVM）：提供弹性计算能力，可根据业务需求灵活调整配置，支持多种操作系统和应用场景。详情请参考：腾讯云云服务器
• 腾讯云对象存储（COS）：提供安全、稳定、低成本的对象存储服务，适用于存储和处理各种类型的非结构化数据。详情请参考：腾讯云对象存储