移动端Div过渡效果无法重置的原因排查问询

这个问题其实是移动端浏览器对hover状态的处理逻辑和桌面端不一样导致的：当你用手指触摸元素时，浏览器会触发hover样式，但不会自动清除这个状态——除非你触摸页面上的其他区域，这就是为什么你的按钮上去之后就卡着回不来了。

另外先提个小问题：你代码里#backButton的height: ;是语法错误，得改成具体值（比如height: auto;），否则可能导致样式解析异常，先把这个修复了。

下面给你两种可行的解决方案，推荐第一种，更符合你想要的交互效果：

方案一：用JavaScript手动控制按钮状态 #

这种方法通过监听触摸事件来切换按钮的显示/隐藏状态，完全避开移动端hover的坑：

首先修改CSS，把原来的hover样式改成一个自定义类，同时修复语法错误：

* { 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}
body { font-family: sans-serif; }
.gallery { width: 100vw; height: 100vh; background: #3A3; }
#backButton { 
  position: fixed; 
  right: 35%; 
  bottom: -30px; 
  width: 30%; 
  height: auto; /* 修复语法错误 */
  background: hsla(80, 90%, 40%, 0.2); 
  color: white; 
  padding: 20px 0 10px 0; 
  text-align: center; 
  transition: 0.5s; /* 现在主流浏览器都支持标准写法，可去掉-webkit-前缀 */
  border: solid hsla(80, 90%, 40%, 0.5); 
  border-right: none; 
  box-shadow: 0 1px 3px black; 
  border-radius: 10px 10px 0 0; 
}
/* 把hover样式换成自定义类 */
#backButton.show-button { 
  bottom: 0; 
}

然后在body标签结束前添加JavaScript代码，监听触摸事件：

<script>
const backButton = document.getElementById('backButton');
let isButtonVisible = false;

// 触摸按钮时切换显示状态
backButton.addEventListener('touchstart', function(e) {
  e.preventDefault(); // 阻止浏览器默认的hover行为
  isButtonVisible = !isButtonVisible;
  this.classList.toggle('show-button', isButtonVisible);
});

// 触摸页面其他区域时隐藏按钮
document.addEventListener('touchstart', function(e) {
  if (!backButton.contains(e.target)) {
    isButtonVisible = false;
    backButton.classList.remove('show-button');
  }
});
</script>

这样操作后，触摸按钮会让它滑上来，再触摸按钮或者页面其他区域，它就会滑回去，完全符合你的预期。

方案二：用媒体查询适配移动端交互 #

如果你不想写JS，可以用CSS媒体查询区分支持hover的设备和触摸设备：

/* 针对桌面端（支持hover的设备）保留hover效果 */
@media (hover: hover) {
  #backButton:hover {
    bottom: 0;
  }
}

/* 针对移动端（不支持hover的设备）用active状态替代 */
@media (hover: none) {
  #backButton:active {
    bottom: 0;
  }
}

不过这个方案的局限性是：按钮只有在手指按住的时候才会滑上来，松开就立刻滑回去，和桌面端hover的“停留”效果不一样，适合对交互要求不高的场景。

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