在触摸屏上保留悬停效果答案

【问题标题】：Preserve hover effect on touchscreen在触摸屏上保留悬停效果
【发布时间】：2016-09-08 09:17:37
【问题描述】：

我正在使用Instsfeed.js 处理包含图像提要的网站。拉取图片、点赞、cmets 等一切正常。

我做了一个悬停效果，在图片上叠加了喜欢和 cmets 的数量，如下所示：https://jsfiddle.net/9w1neq9m/3/

#instafeed {
  margin-top: 30px;
  text-align: center;
  font-family: 'brandon-grotesque', sans-serif;
}
.insta-post {
  display: inline-block;
  margin: 0 10px 20px 10px;
  position: relative;
}
.insta-hover {
  position: absolute;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: rgba(0, 0, 0, .5);
  color: white;
  opacity: 0;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
  padding: 0 15px;
}
.insta-hover .fa:last-of-type {
  padding-left: 15px
}
.insta-post:hover .insta-hover {
  opacity: 1;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
}

<div id="instafeed">
  <div class="insta-post">
    <a href="#" target="_blank">
      <div class="insta-hover">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quam libero, blandit at odio et, fermentum luctus massa. Sed et tortor volutpat, semper orci sit amet, venenatis metus. Nullam scelerisque sem at risus maximus sodales.</p>
        <p><i class="fa fa-heart" aria-hidden="true"></i> 130 <i class="fa fa-comment" aria-hidden="true"></i> 29</p>
      </div>
      <img src="https://unsplash.it/300/300" alt="Image from Instagram">
    </a>
  </div>

  <div class="insta-post">
    <a href="#" target="_blank">
      <div class="insta-hover">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quam libero, blandit at odio et, fermentum luctus massa. Sed et tortor volutpat, semper orci sit amet, venenatis metus. Nullam scelerisque sem at risus maximus sodales.</p>
        <p><i class="fa fa-heart" aria-hidden="true"></i> 130 <i class="fa fa-comment" aria-hidden="true"></i> 29</p>
      </div>
      <img src="https://unsplash.it/300/300" alt="Image from Instagram">
    </a>
  </div>
</div>

显然这不适用于移动设备。点击直接进入链接（如您所料..），但这并不是我真正想要的。

我想先点击激活悬停效果，然后，如果用户再次点击，链接才能真正起作用。

我发现这个http://www.hnldesign.nl/work/code/mouseover-hover-on-touch-devices-using-jquery/ 似乎在做我想做的事——我就是无法让它工作。整个隐藏/显示悬停的事情让我失望..

【问题讨论】：

标签： html css hover touch

【解决方案1】：

给你：

jQuery：

$('.insta-post').on("touchstart", function(e) {
  "use strict"; //satisfy the code inspectors
  var link = $(this); //preselect the link
  if (link.hasClass('hasHover')) {
    return true;
  } else {
    link.addClass("hasHover");
    $('.insta-post').not(this).removeClass("hasHover");
    e.preventDefault();
    return false; //extra, and to make sure the function has consistent return points
  }
});

CSS：

.insta-post:hover .insta-hover,
.insta-post.hasHover .insta-hover {
  opacity: 1;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
}

更新JSFiddle

使用触摸设备访问它，或使用调试工具（如 Chrome 的网络检查器，可以模拟触摸）。

PS：非常感谢分享这么有用的链接，因为我真的需要这种插件。

【讨论】：