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

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 的视口(viewport)内。但是，我的图形元素是 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 你提到了 permorance，它不是 jank 或任何事实，只要你触摸框，使用 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 transition，长度为 0s 但延迟为 0.5s，这是同时悬停效果需要完成。所以，viola 没有 javascript，它在我目前测试过的所有东西上都运行良好。我想几乎所有的触摸设备都支持 CSS 转换，所以应该没问题。

代码以防对他人有帮助:

.jac-rollover {
    ...

    &:hover,
    &:focus {

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

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