Bootstrap 移动悬停答案

【问题标题】：Bootstrap mobile hoverBootstrap 移动悬停
【发布时间】：2018-01-06 23:21:12
【问题描述】：

我已经建立了一个带有投资组合的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 而在其他页面上却不行。有什么办法可以防止这个错误吗？

【问题讨论】：

如何将鼠标悬停在触摸屏设备上？
您不能在移动设备上设置悬停效果。或者，更确切地说，您可以，但您不能将鼠标悬停在该元素上。相反，当使用移动/触摸屏设备时，悬停效果会转化为点击。

标签： html css twitter-bootstrap

【解决方案1】：

没有像您在其他设备上所知道的那样，将鼠标悬停在移动设备上。尽管Fix CSS hover on iPhone/iPad/iPod

，人们已经通过诸如此类的变通方法取得了成功

【讨论】：