在触摸设备上悬停状态后启用链接而不影响正常滚动

Question

我有一个figure 元素，它有一个悬停状态，它会影响图中的其他元素； img、figcaption 等。通过使用以下 jQuery，我已经能够在触摸设备上“工作”这种效果：

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

// portfolio__img--taphover` has the same CSS rules as `figure:hover, figure:focus`

我忘记了我现在从哪里得到的代码，但那是一篇博客文章。这工作得很好，但我并不完全满意。如果您触摸并滚动，因此在页面下方滚动了相当长的距离，您可能会错过悬停效果，因为该元素可能不在touchEnd 的视口内。但是，我的图形元素是 100% 宽度，因此使用 touchStart 会影响滚动，因为用户触摸屏幕的瞬间就会应用悬停效果。我环顾四周，似乎没有 touchTap 或类似事件。我想这是因为如果用户触摸（点击）屏幕以显示某些内容，或者触摸以滑动和滚动，则非常难以解决。我试过touchMove，但效果不佳。

我确信有一种方法可以使用 CSS 来实现，例如让我的覆盖链接具有较低的 z-index，只有在悬停时才会变得更高。也许我可以将z-index 更改延迟到点击事件之后，但我仍然会遇到检测点击与触摸/滚动的整个问题。有没有其他人遇到过这种行为并对此感到恼火，和/或找到了解决方案？

我的 HTML：

<figure class="grid__item  mobile--one-half  desk--one-quarter  portfolio__img">

    <img class="portfolio__test" srcset="<?php echo $image_src; ?> 1536w, 
        <?php echo $image_src_1024; ?> 1024w, 
        <?php echo $image_src_900; ?> 900w, 
        <?php echo $image_src_600; ?> 600w,
        <?php echo $image_src_320; ?> 320w"
    sizes="(min-width: 78.75em) 25vw, (min-width: 30em) 50vw, 100vw" 
    alt="<?php the_field( 'portfolio_alt_text' ); ?>">
    <figcaption>
        <div class="table">
            <div class="table-cell">
                <h2><?php the_sub_field( 'portfolio_description' ); ?></h2>
            </div>
        </div>
    </figcaption>
    <a class="portfolio__link" href="<?php the_sub_field( 'portfolio_link' ); ?>">View More</a>

</figure>

相关 CSS：

.portfolio__link {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
}

干杯。一旦我找到了一个好的解决方案，我会在适当的时候更新这个问题，以防万一没有人有这个问题！

编辑：使用 Codepen 示例更新

所以我意识到我之前不是很清楚，所以我做了几个代码笔来说明我遇到的问题：

没有正确的链接（href="#"）http://codepen.io/patrickwc/pen/yyYVeV

如果您使用触摸设备触摸这些链接，则悬停效果会起作用并且非常好。您仍然可以在不触发悬停效果的情况下滑动和滚动，并且当您在触摸前一个框后触摸另一个框时，效果会在前一个框上停止并很好地应用于当前框。我正在寻找这种行为。 @Edgar Sanchez 你提到了性能，它不是卡顿或任何事情，因为touchstart 只要你触摸盒子，效果就会触发。我想要的是像悬停效果这样的效果，它仍然允许您在不触发悬停状态（或 --taphover 类）的情况下滑动和滚动过去。

有正确的链接（无 js）http://codepen.io/patrickwc/pen/jEbVWq

显然现在这些盒子不能很好地工作。浏览器会尝试立即将您带到http://www.something.com/，而不考虑悬停状态。

理想情况下，我想要一些仅在悬停状态后启用jac-rollover__link 的javascript。我想这实际上可以工作，也许 jquery 的悬停状态可以使该类使其 z-index 更高...我现在就试一试。

Answer 1

我设法通过纯 CSS 让它工作。我把visibility: hidden放在jac-rollover__link上，然后我在可见性上使用了CSS过渡，长度为0但延迟为0.5s，这与悬停效果完成的时间相同。所以，viola 没有 javascript，它在我迄今为止测试过的所有东西上都非常有效。我想几乎所有的触控设备都支持 CSS 过渡，所以应该没问题。

代码以防万一：

.jac-rollover {
    ...

    &:hover,
    &:focus {

        .jac-rollover__link {
            visibility: visible;
            transition: visibility 0s 0.5s;
        }
    }
}

.jac-rollover__link {
    ...
    visibility: hidden;
}