如何将基于Hover的CSS效果代码改为点击开关功能？

你的思路没问题——通过JS切换类来控制效果，但核心问题是CSS未针对切换的类编写对应样式规则，仅保留了:hover的触发逻辑。以下是修改后的完整可运行代码：

1. HTML（移除多余短横线） #

<h1 id="Title">Click Me</h1>

2. CSS（将hover触发替换为类触发） #

h1::before {  
  transform: scaleX(0);
  transform-origin: bottom right;
}

/* 替换原hover选择器为类选择器，配合JS切换 */
h1.Transform::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

h1::before {
  content: "";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background: hsl(200 100% 80%);
  z-index: -1;
  transition: transform .3s ease;
}

h1 {
  position: relative;
  font-size: 5rem;
  cursor: pointer; /* 添加鼠标指针提示，明确可点击 */
}

3. JavaScript（优化代码逻辑） #

const title = document.getElementById("Title");
title.addEventListener("click", () => {
  title.classList.toggle("Transform");
});

关键修改说明： #

• 将CSS中h1:hover::before的样式规则替换为h1.Transform::before，让类切换能触发背景缩放效果
• 给<h1>添加cursor: pointer，提升用户交互感知
• JS中优化元素获取方式，避免重复调用getElementById

内容的提问来源于stack exchange，提问作者sappho7124