Question

所以我创建了一个图片的网格布局，其中悬停叠加层提供了图片所代表的页面的链接，并且它在桌面上都可以正常工作但我在试图让它工作时遇到问题移动，支持触控的设备，因为显然没有在移动设备上悬停。

使用提供的代码，当在移动设备上触摸图像时，如何在相关图像上显示叠加层？我认为它必须是某种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>

CSS：

.container {margin:0 auto; padding:0 10px; max-width:1140px;}
.flex-container {display: -webkit-flex; display: flex; -webkit-flex-flow: column wrap; flex-flow: column wrap; -webkit-justify-content: center; justify-content: center;}
.flex-container li {width:100%; display: -webkit-flex; display:flex; margin-bottom:10px; position:relative;}
.flex-container li.text {padding:20px 10px; background-color:#000; color:#FFF; font-weight:600; -webkit-align-items: center; align-items:center;}
.flex-container li img {display:block; width:100%; max-width:100%; height:auto; max-height:342px;}
.flex-container li .overlay {position:absolute; top:10px; left:10px; bottom:10px; right:10px; background: rgba(255, 255, 255, .83); padding:10px 20px; display: -webkit-flex; display:flex; -webkit-flex-flow: column wrap; flex-flow: column wrap; -webkit-justify-content: center; justify-content:center; opacity: 0; transition: opacity .5s ease; }
.flex-container li .overlay:hover {opacity:1;}
.flex-container li .overlay h2 {font-size:3.4rem; font-weight:300; line-height:3.4rem; margin-bottom:2rem;}
.flex-container li .overlay p {margin-bottom:1.5rem; padding-left:2rem;}
.flex-container li .overlay p:last-child {margin-bottom:0;}

这里有一个基本概念的小提琴：http://jsfiddle.net/tvzebvzq/

修改

我已尝试过以下@depperm的解决方案，但出于某种原因，它并不适用于真实的网页。他的小伙子可以工作，但如果我甚至试图将他的整个小提琴复制并粘贴到一个新文件中，那么它甚至都无法工作。还有其他建议吗？（或者为什么他的尝试不起作用的理由？）

Answer 1

我会添加一些简单的jquery：

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

fiddle

Answer 2

我最终做的是在文档正文中添加no-touch类，并将一行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');
         });
       }
    });

将触摸类添加到多个隐藏：悬停叠加层

修改

2 个答案: