Question

我正在使用Instsfeed.js处理包含图片供稿的网站。拉图像，喜欢，评论和一切都很好。

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

我想首先点击以激活悬停效果，然后，如果用户再次点击，则链接实际工作。

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

Answer 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：非常感谢分享这样有用的链接，因为我真的需要这种插件。

保留触摸屏上的悬停效果

1 个答案: