点击/鼠标悬停事件触发后flexbox样式无法恢复原状态求助

问题根源 #

你当前的代码只在触发事件时给盒子设置了蓝色背景，但完全没写恢复初始黑色的逻辑——点击事件只做了“变蓝”这一件事，没说什么时候改回去；mouseover同理，只处理了光标移入，没处理移出，所以颜色会一直停留在修改后的状态。

两种解决办法 #

办法1：用JS补全状态切换逻辑 #

如果一定要用JavaScript实现：

• 点击后临时变蓝，几秒后自动恢复：

  const flexBox = document.querySelector('.flex');
  flexBox.addEventListener('click', () => {
      flexBox.style.background = 'blue';
      console.log('click');
      // 1秒后恢复黑色，时间可自行调整
      setTimeout(() => {
          flexBox.style.background = 'black';
      }, 1000);
  });
  

• 鼠标移入变蓝，移出恢复：

  const flexBox = document.querySelector('.flex');
  flexBox.addEventListener('mouseover', () => {
      flexBox.style.background = 'blue';
  });
  // 必须配对mouseout事件处理移出逻辑
  flexBox.addEventListener('mouseout', () => {
      flexBox.style.background = 'black';
  });
  

办法2：用CSS伪类实现（更简洁推荐） #

其实不用写JS，CSS原生伪类就能完美处理这些交互状态，浏览器会自动帮你切换：

body{
    background-color: white;
}
.flex{
    display: flex;
    height: 500px;
    width: 500px;
    background-color: black;
    /* 加过渡动画，颜色变化更自然 */
    transition: background-color 0.2s ease;
}
/* 鼠标悬停时变蓝 */
.flex:hover {
    background-color: blue;
}
/* 点击按住时变蓝，松开自动恢复 */
.flex:active {
    background-color: blue;
}

这样不管是点击松开，还是鼠标移开，盒子都会自动变回黑色，代码更简洁也符合前端最佳实践。

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