Question

我已经搜索过高低，但无法找到解决此问题的方法。

在桌面浏览器上，当用户将鼠标悬停在图像上时，会出现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更聪明的东西？）

Answer 1

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

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

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

Answer 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。

禁用在移动设备上悬停Div的锚点直到打开

2 个答案: