如何实现元素鼠标悬停后消失并保持隐藏状态？

你的当前代码仅能在鼠标悬停时让文本透明，鼠标离开后样式会自动恢复。要实现悬停一次后文本永久隐藏，需要借助JavaScript修改元素的类状态，具体步骤如下：

1. 调整CSS样式 #

新增一个专门用于永久隐藏文本的类，保留原有的过渡效果：

.disappear {
  margin-top: 60px; 
  text-align: center;
  transition: all 5s ease .3s;
  font-family: Bungee Spice;
}

/* 新增类：用于永久隐藏文本 */
.disappear.hidden {
  color: transparent;
}

2. 添加JavaScript逻辑 #

监听元素的鼠标进入事件，触发后为元素添加hidden类，该类会一直保留在元素上，因此文本会持续隐藏：

// 获取所有带.disappear类的元素
document.querySelectorAll('.disappear').forEach(element => {
  element.addEventListener('mouseenter', () => {
    // 添加hidden类，永久应用隐藏样式
    element.classList.add('hidden');
  });
});

原理说明 #

CSS的:hover伪类仅在鼠标悬停期间生效，鼠标离开后样式会自动还原。而通过JavaScript添加的类会一直绑定在元素上（除非手动移除），因此能实现悬停一次后文本永久隐藏的效果。

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