为什么我的 Div 转换没有在移动设备上重置答案

【问题标题】：Why is my Div transition not resetting on mobile为什么我的 Div 转换没有在移动设备上重置
【发布时间】：2022-04-26 17:51:35
【问题描述】：

我已经设置了一个 div 以在悬停时从页面底部之外向上移动。当我在 Android（firefox 和 chrome）上尝试时，这在 firefox“响应式设计模式”中运行良好。 div 在手指上方过渡并且无法返回其原始状态。

<!DOCTYPE html>
<html>

<head>
  <title>Swipe Gesture - Gallery</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0;" />
  <style>
    * {
      -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: ;
      background: hsla(80, 90%, 40%, 0.2);
      color: white;
      margin: 0 0 0 0;
      padding: 20px 0 10px 0;
      text-align: center;
      -webkit-transition: 0.5s;
      border: solid hsla(80, 90%, 40%, 0.5);
      border-right: none;
      box-shadow: 0 1px 3px black;
      border-radius: 10px 10px 0 0;
    }
    
    #backButton:hover {
      bottom: 0;
    }
  </style>
</head>

<body>
  <div class="gallery"></div>
  <div id="backButton">Home</div>
</body>

</html>

块引用

【问题讨论】：

标签： html css google-chrome firefox

【解决方案1】：

尝试添加 :focus 也

#backButton:hover, #backButton:focus{
  bottom: 0;
}

如果这仍然不起作用，请尝试设置光标：指向按钮的指针。

【讨论】：

感谢您的建议，它工作得更好一些。我添加了焦点，然后添加了光标：指向#backButton 的指针。 DIV 的行为是当用手指打开它时，它会在 DIV 之外的区域得到手指时关闭。当手指被移开时，我真的需要 div 滑出，因为 div 之外的区域在手指时会做其他事情。

【解决方案2】：

在 Android 上，:hover 事件实际上是一个 :focus 事件。一旦你点击它，它就会一直保持焦点，直到你在外面点击它（在不同的元素上）。

如果您想让它在 android 上运行，请改用 :active。但是，在此之前将媒体查询添加到您的 CSS。

示例：

    @media only screen and (max-device-width: 480px) {
       #backButton:active{
       bottom: 0;
    }

    @media only screen and (min-device-width: 480px) {
       #backButton:hover{
       bottom: 0;
    }

注意：需要长按 div

希望有帮助！

【讨论】：

谢谢 :) :active 工作，尽管滑出行为几乎立即触发，不管我的手指在它上面的事实。我想我可以在提供的帮助下解决这个问题。如果有什么想在手指时延迟或按住 div 的想法，我将不胜感激。
您可以使用简单的 javascript 来实现。这是我制作的 JS 小提琴：jsfiddle.net/sbwnyy6b/1 检查这是否是您想要的。
感谢 Mithu，这对我在寻找 javascript 事件时没有发现的 ontouch 很有帮助。
那是我一直看的地方.. 在这种情况下还不够难。学过的知识。我很感激你:)