如何实现鼠标悬停点击隐藏文本、空格键删除页面文本？HTML/CSS与JavaScript实现方案对比

Hey there! 作为前端新手能尝试用CSS做交互已经超棒了😉 先直接给你结论：

• 鼠标点击隐藏文本：可以用CSS的技巧实现，但有局限性；
• 空格键触发删除：必须借助JavaScript——因为CSS没有监听键盘事件的能力；
• 综合来看，JavaScript是更优的实现方式，逻辑更清晰、扩展性更强，也能完整实现你要的两个交互效果。

一、用CSS实现点击隐藏（仅能完成部分需求） #

如果你只想实现“点击文本隐藏”这一个效果，可以用CSS的复选框Hack技巧，不需要JS。原理是利用<label>关联隐藏的复选框，点击标签时切换复选框状态，再通过:checked伪类控制文本的显示：

.body { background: #f1f1f1; font-family: tahoma; }
.container { width: 600px; margin: 70px auto; }
.block { padding: 40px; border: 1px solid #ddd; color: #666; background: #fff; cursor: pointer; }

/* 隐藏复选框本体 */
.toggle-checkbox {
  display: none;
}

/* 复选框选中时，关联的文本隐藏 */
.toggle-checkbox:checked + .block {
  display: none;
}

<div class="container">
  <div class="container_1">
    <input type="checkbox" id="toggle-text" class="toggle-checkbox">
    <label for="toggle-text" class="block">Junior Frontend Developer</label>
  </div>
</div>

但这种方式的问题很明显：没法响应键盘事件，所以“按空格删除文本”这个需求CSS根本做不到，必须用JS。

二、JavaScript完整实现（推荐方案） #

JS可以同时监听点击和键盘事件，逻辑更灵活，也能完美实现你要的两个效果。结合你之前的代码，我帮你调整了结构和逻辑：

1. HTML结构（简化版） #

不需要两个<div>来回切换了，只用一个目标元素即可：

<div class="container">
  <div class="container_1">
    <div class="block" id="target-text">Junior Frontend Developer</div>
  </div>
</div>

2. CSS基础样式 #

保留你原来的基础样式，新增两个类分别控制“隐藏（保留位置）”和“删除（不占位置）”：

.body { background: #f1f1f1; font-family: tahoma; }
.container { width: 600px; margin: 70px auto; }
.block { padding: 40px; border: 1px solid #ddd; color: #666; background: #fff; cursor: pointer; }

/* 隐藏文本但保留元素位置 */
.hidden {
  visibility: hidden;
}

/* 完全移除元素，不再占据页面空间 */
.removed {
  display: none;
}

3. JavaScript交互逻辑 #

监听点击事件切换文本可见性，监听键盘事件触发删除：

// 获取目标文本元素
const targetText = document.getElementById('target-text');
// 标记文本是否已被隐藏
let isTextHidden = false;

// 点击事件：切换文本可见性
targetText.addEventListener('click', () => {
  isTextHidden = !isTextHidden;
  // 切换hidden类
  targetText.classList.toggle('hidden', isTextHidden);
});

// 键盘事件：空格键触发删除
document.addEventListener('keydown', (e) => {
  // 判断是否按下空格键，且文本已经被隐藏（你也可以去掉isTextHidden的条件，直接按空格删除）
  if (e.code === 'Space' && isTextHidden) {
    // 给元素添加removed类，完全删除
    targetText.classList.add('removed');
    // 如果想要直接从DOM中移除元素，可以用：targetText.remove();
  }
});

为什么推荐JavaScript方案？ #

1. 功能完整：能同时实现点击隐藏和空格键删除，CSS做不到后者；
2. 逻辑清晰：代码直白易懂，后续要修改逻辑（比如点击恢复文本、按其他键触发）非常方便；
3. 无hack：不需要依赖CSS的奇技淫巧，符合现代前端开发的最佳实践；
4. 扩展性强：如果以后要加更多交互（比如动画效果、提示文字），JS的适配性比CSS好太多。

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