html - Bootstrap 移动悬停

Question

我已经构建了一个 Website有投资组合。

我的问题是手机上的悬停效果(例如在我的 iPhone 上)。

在 index.php 上我构建了一个旋转卡片，点击时它在移动设备上运行良好。

对于投资组合，我使用以下代码:

.tile:hover .overlay {
  opacity: 1;
}

.tile:hover p {
  top: 75%;
}

.tile:hover a {
  top: 90%;
}

.tile:hover h2 {
  bottom: 60%;
}

<div class="container section">
  <div class="row">
    <h1>Projekt</h1>
    <div class="col-sm-6">
      <div class="tile tile_effect">
        <img src="images/background.jpeg">
        <div class="overlay">
          <h2>ILakeIt</h2>
          <p>Webdesign | Test | Test | Test Webdesign | Test | Test | Test Webdesign | Test | Test | Test</p>
          <a href="http://www.google.de">To Projekt</a>
        </div>
      </div>
    </div>
  </div>
</div>

我已经尝试使用 :focus 和 :active，但在我的手机上仍然没有悬停效果。

我不明白为什么它在 index.html 上可以用 :hover 工作，但在另一个页面上却不行。有什么解决方案可以防止这个错误吗？

Answer 1

在移动设备上没有您所知道的在其他设备上悬停这样的东西。尽管人们已经通过此类解决方法取得了成功 Fix CSS hover on iPhone/iPad/iPod