在移动设备上禁用 Hover Div 中的锚点直到打开答案

【问题标题】：Disable Anchor Within Hover Div on Mobile Until Open在移动设备上禁用 Hover Div 中的锚点直到打开
【发布时间】：2015-04-13 12:10:37
【问题描述】：

我已经到处搜索了，但找不到这个确切问题的解决方案。

在桌面浏览器上，当用户将鼠标悬停在图像上时，会出现一个 div，如果需要，他们可以单击 div 内的链接。但是，在移动设备上，悬停是由点击触发的。如果用户在正确的位置单击，即使 div 尚不可见，他们也可能不小心单击锚点并离开页面。（换句话说，在点击链接的同时，div 从display:none 变为display:block。）

我想防止在移动浏览器上发生意外点击，但是我仍然希望链接在 div 可见后仍然可用。

我的代码：

<style>
  .staffpic {
    position: relative;
    width: 33.33333%;
    height: auto;
  }
  .staffpic:hover .popup {
      display: block;
  }
  .staffpic img {
      display: block;
      width: 110px;
      height: 110px;
      margin: 0 auto;
  }
  .popup {
      display:none;
      position: absolute;
      bottom: 0;
      left: -5px;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 15px;
      background-color: rgba(255, 153, 0, 0.9);
      color: #fff;
      text-transform: uppercase;
  }
</style>

<div class="staffpic">
  <img src="/wp-content/uploads/image.jpg" />
  <div class="popup">
    John Smith, Director<br/>
    CityName | <a href="mailto:johnsmith@example.com">Email John</a>
  </div>
</div>

有什么想法吗？欢迎使用 HTML、CSS、JS 和 jQuery 解决方案！（也许比我能想到的使用 pointer-events:none 和一些 jQuery 更聪明的东西？）

【问题讨论】：

标签： javascript jquery html css hover

【解决方案1】：

我实际上即将在一个项目中遇到同样的问题，并记下了一个潜在的解决方案。还没有测试它，但它可能会帮助你。仅当元素的显示不是“无”时才应触发链接：

var popup = $('.popup'),
    display = popup.css('display');

if (!(display === 'none')) {
  popup.on('click', function(e) {
    e.preventDefault();
  });
}

【讨论】：

不幸的是，这对我不起作用。用户单击的那一刻，元素的显示不再是“无”，因此它不会被 if 语句捕获。也许它需要在其上设置某种持续时间，以便在元素样式更改后的 0.2 秒内，链接变为可点击（或类似的东西）。不知道该怎么做。

【解决方案2】：

我找到了一个解决方案，但它并不优雅。我想发布它以防将来有人遇到此问题并且只需要一些可行的东西！

我在带有真实链接的跨度中添加了一个假链接，然后为其设置了新的显示样式，并且基于父跨度的真实链接被悬停在上面。

<style>
  .staffpic {
    position: relative;
    width: 33.33333%;
    height: auto;
  }
  .staffpic:hover .popup {
      display: block;
  }
  .staffpic img {
      display: block;
      width: 110px;
      height: 110px;
      margin: 0 auto;
  }
  .staffpic a { 
      display: none; /* Added */
  }
  .staffpic.link:hover a {
      display: inline; /* Added */
  }
  .staffpic.link:hover .fakelink {
      display: none; /* Added */
  }
  .popup {
      display:none;
      position: absolute;
      bottom: 0;
      left: -5px;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 15px;
      background-color: rgba(255, 153, 0, 0.9);
      color: #fff;
      text-transform: uppercase;
  }
</style>

<div class="staffpic">
  <img src="/wp-content/uploads/image.jpg" />
  <div class="popup">
    John Smith, Director<br/>
    CityName | <span class="link"><a href="mailto:johnsmith@example.com">Email John</a><span class="fakelink">Email John</span></span>
  </div>
</div>

如果有人有它，我仍然喜欢没有所有这些添加的 html 的更清洁的解决方案。

【讨论】：