Javascript 向多个隐藏：悬停覆盖添加触摸类

所以我创建了一个网格布局的图像，上面有悬停覆盖，提供了指向图像所代表页面的链接，并且在桌面上运行良好，但我在尝试将其应用于移动设备、支持触摸的设备时遇到了问题，因为移动设备上显然没有悬停

使用提供的代码，当在移动设备上触摸图像时，如何使覆盖显示在相关图像上？我想它必须是某种jquery/javascript，但我对它了解得不多

我希望当你触摸第一张图像时，只有第一张图像的叠加显示出来，而不是其他叠加显示出来

HTML：

    <div class="container">
    <ul class="flex-container">
        <li class="item-1">
            <img src="_img/image1.jpg" alt="image1">
            <div class="overlay">
                <h2>TITLE</h2>
                <p><i class="fa fa-file-o  fa-fw fa-lg"></i> <a href="#">Info Page</a></p>
                <p><i class="fa fa-film fa-fw fa-lg"></i> <a href="#">Video</a></p>
            </div>
        </li>
        <li class="item-2">
            <img src="_img/image2.jpg" alt="Image 2">
            <div class="overlay">
                <h2>TITLE</h2>
                <p><i class="fa fa-file-o  fa-fw fa-lg"></i> <a href="#">InfoPage</a></p>
                <p><i class="fa fa-film fa-fw fa-lg"></i> <a href="#">Video</a></p>
            </div>
        </li>
     </ul>
     </div>

以下是一些基本想法：

编辑

---

我在下面尝试了@depperm的解决方案，但由于某些原因，它在实际页面上不起作用。他的jfiddle可以工作，但如果我尝试将他的整个fiddle复制并粘贴到一个新文档中，那就根本不起作用了。还有其他建议吗？（或者他的尝试失败的原因？

我想添加一些简单的jquery：

$(function(){
  $('img').on('tap',function(){
    $(this).next().show();
  });
  $('.overlay').on('tap',function(){
    $(this).hide();
  });
});

---

我最后做的是在文档主体中添加一个

无接触类，并将CSS的一行更新为：

body.no-touch .flex-container li .overlay:hover, body.touch .flex-container li .overlay.touchFocus {opacity:1;}

然后我添加了以下js代码，Viola！我的悬停状态现在在移动设备上作为触摸事件工作

    $(function(){
      // See if this is a touch device
      if ('ontouchstart' in window)
      {
         // Set the correct [touchscreen] body class
         $('body').removeClass('no-touch').addClass('touch');

         // Add the touch toggle to show text when tapped
         $('.overlay').click(function(){
            $(this).closest('.overlay').toggleClass('touchFocus');
         });
       }
    });

嗯，我已经在代码的末尾添加了一点javascript，但它似乎在移动设备上仍然不起作用？你创建的小提琴工作得很好，但当我把它添加到我的页面上时就不行了*注意，我已经在我的页面上使用jquery 1.10.1进行视频弹出，所以这可能会导致问题吗？实际上，我已经将小提琴完整框架中的全部代码复制到一个新文件中，并进行了测试，但它不起作用。如果我在小提琴中测试它，它会。这对我来说毫无意义？为什么它只能在小提琴的范围内工作@depperm您可以尝试将
点击
更改为
触摸启动
我已将
点击
更改为
触摸启动
，但它仍然不工作？这对我来说没有意义？为什么小提琴可以工作，但是从头开始创建页面却不行@脱发
    $(function(){
      // See if this is a touch device
      if ('ontouchstart' in window)
      {
         // Set the correct [touchscreen] body class
         $('body').removeClass('no-touch').addClass('touch');

         // Add the touch toggle to show text when tapped
         $('.overlay').click(function(){
            $(this).closest('.overlay').toggleClass('touchFocus');
         });
       }
    });