如何实现文字hover时变色且鼠标移开后颜色保持不变

你当前的代码失效是因为:hover伪类仅在鼠标悬停在元素上时生效，鼠标移出后绑定的动画属性会被移除，元素样式回归初始状态。如果要实现悬停触发、无需点击的永久变色效果，必须使用少量JavaScript实现，纯CSS无法原生支持这类持久状态的记忆。

方案1：JavaScript实现（推荐，完全符合需求） #

只需要给原有代码加1个事件监听即可，代码改动极小：
修改CSS，用过渡代替动画更适配场景：

.main{
    color: white;
    font-size: 20px;
    /* 定义变色过渡效果，和你原有动画参数一致 */
    transition: color 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* 定义变色后的永久样式 */
.main.changed {
    color: black;
}

HTML保持原有代码不变：

<p class="main">
  Lorem ipsum dolor sit amet
</p>

新增JS代码绑定事件：

// 鼠标第一次移入时添加永久变色类，后续不会回弹
document.querySelector('.main').addEventListener('mouseenter', e => e.target.classList.add('changed'))

方案2：纯CSS实现（需调整交互为点击触发） #

如果完全不想用JS，可以借助表单复选框的:checked状态实现持久样式，但是需要用户点击元素才能保持变色效果，仅悬停的话移出还是会回弹：

<label class="text-wrap">
  <!-- 隐藏的复选框用来记录状态 -->
  <input type="checkbox" hidden>
  <p class="main">Lorem ipsum dolor sit amet</p>
</label>

.main{
    color: white;
    font-size: 20px;
    transition: color 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* 悬停时临时变色 */
.text-wrap:hover .main {
    color: black;
}
/* 复选框选中后永久保持变色 */
.text-wrap input:checked ~ .main {
    color: black;
}

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