Question

我已经设置了一个div，当它悬停在页面底部之外时会向上移动。这在firefox＆＃34;响应式设计模式＆＃34;中工作正常，当我在Android（firefox和chrome）上试用它时。 div在指责上转换，无法返回其原始状态。

＆＃13;

<!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>

＆＃13;

块引用

Answer 1

尝试添加：焦点也

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

如果仍然无效，请尝试设置光标：指向按钮的指针。

Answer 2

我刚检查出来并发现它按预期工作，因为在Android上，:hover事件实际上是:focus事件。一旦你点击它，它就会保持聚焦，直到你在外面点击它（在另一个元素上）。

使用:active代替，如果你想让它在Android上工作。但是，在此之前向您的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

希望有所帮助！

为什么我的Div转换未在移动设备上重置

2 个答案: