Html 在触摸屏上保留悬停效果

我在一个网站上工作，该网站包含一个使用。拉图片，喜欢，评论和一切工作正常

我制作了一个悬停效果，将喜欢和评论的数量叠加在一张图片上，如下所示：

#instafeed{
边缘顶部：30px；
文本对齐：居中；
字体系列：“布兰登怪诞”，无衬线；
}
·insta post{
显示：内联块；
利润率：0 10px 20px 10px；
位置：相对位置；
}
.insta hover{
位置：绝对位置；
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
背景：rgba（0,0,0,5）；
颜色：白色；
不透明度：0；
过渡：不透明度1s；
-webkit转换：不透明度1s；
填充：0 15px；
}
.insta hover.fa：类型的最后一个{
左侧填充：15px
}
.insta post:hover.insta hover{
不透明度：1；
过渡：不透明度1s；
-webkit转换：不透明度1s；
}

给你：

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

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

CSS：

$('.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
  }
});

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

更新

使用触摸设备或Chrome的web inspector之类的调试工具访问它，这些工具可以模拟触摸

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