如何实现点击按钮触发盒子呈现与hover一致的加载悬浮效果

核心逻辑是把hover状态的样式抽成独立公共类，避免把效果和:hover伪类强绑定，同时复用你已经写好的transition规则，保证两种触发方式的效果完全一致。

• 调整CSS样式
  把原本写在.box:hover选择器里的所有悬浮、加载效果规则，同步绑定到一个自定义状态类上，比如命名为is-floating，原有过渡效果完全保留不用修改：

/* 盒子基础样式保留你原来的代码 */
.box {
  width: 200px;
  height: 200px;
  background: #fff;
  /* 你之前写的transition过渡直接保留，不用改 */
  transition: all 0.3s ease;
}

/* hover和主动激活状态共用同一套样式，保证效果100%一致 */
.box:hover,
.box.is-floating {
  transform: translateY(-10px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  /* 这里补全你之前写的所有hover状态下的加载、悬浮效果样式 */
}

• 绑定按钮点击交互
  写一段简单的JS监听按钮点击事件，点击时给盒子元素加上刚才定义的is-floating类即可：

// 替换成你页面里实际的按钮、盒子选择器
const actionBtn = document.querySelector('.trigger-btn');
const boxEl = document.querySelector('.box');

actionBtn.addEventListener('click', () => {
  // 加上类之后不需要鼠标悬停，盒子就会呈现和hover完全一样的效果
  boxEl.classList.add('is-floating');
  
  // 如果需要支持点击按钮切换显示/隐藏效果，把上面的add换成toggle即可
  // boxEl.classList.toggle('is-floating');
})

这种写法没有重复写样式规则，后续如果要调整悬浮效果，只需要改一处代码就行，维护成本很低，也不会出现两种触发方式效果不一致的问题。

效果示意图

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